Sunday, April 8, 2012

Jquery - Check: If scrollbar visible (div with overflow:auto)



is it possible to check the overflow:auto from 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).







Thanks in advance!


Peter



Source: Tips4all

3 comments:

  1. You need element.scrollHeight. Compare it with $(element).height().

    ReplyDelete
  2. I should change a little thing of what Reigel said:

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


    innerHeight counts control's height and it's top and bottom paddings

    ReplyDelete
  3. Maybe a more simple solution.

    if ($(document).height() > $(window).height()) {
    // scrollbar
    }

    ReplyDelete