javascriptcssdomscrollbar

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


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;