javascript - 如何检查滚动条是否可见？

Question

是否可以检查 div 的 overflow:auto？

例如:

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'):
         }
    }

});

有时内容很短(没有滚动条)，有时很长(滚动条可见)。

Answer 1

一个小插件。

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

像这样使用它，

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

测试在 Firefox、Chrome、IE6、7、8 上工作

但在 body 标签选择器上无法正常工作

demo

---

编辑

我发现当你有导致垂直滚动条出现的水平滚动条时，这个功能不起作用....

我找到了另一个解决方案...使用 clientHeight

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