How can I check if a scrollbar is visible?

css, dom, javascript, scrollbar

Solution

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;

Problem

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).

Original source