Peter Peter - 3 months ago 11
jQuery Question

How can I check if a scrollbar is visible?

Is it possible to check the

overflow:auto
of a div?

For example:

HTML

<div id="my_div" style="width: 100px; height:100px; overflow:auto;" class="my_class">
* content
</div>


JQUERY

$('.my_class').live('hover', function (event)
{
if (event.type == 'mouseenter')
{
if( ... if scrollbar visible ? ... )
{
alert('true'):
}
else
{
alert('false'):
}
}

});


Sometimes is the content short (no scrollbar) and sometimes long (scrollbar visible).

Answer

a little plugin for it.

(function($) {
    $.fn.hasScrollBar = function() {
        return this.get(0).scrollHeight > this.height();
    }
})(jQuery);

use it like this,

$('#my_div1').hasScrollBar(); // returns true if there's a `vertical` scrollbar, false otherwise..

tested working on Firefox, Chrome, IE6,7,8

but not working properly on body tag selector

demo


Edit

I found out that when you have horizontal scrollbar that causes vertical scrollbar to appear, this function does not work....

I found out another solution... use clientHeight

return this.get(0).scrollHeight > this.get(0).clientHeight;
Comments