使用jQuery检测DIV中滚动条的存在？

Question

我想使用jQuery检测DIV中是否存在滚动条。我正在考虑使用$('div').scrollTop()，但在滚动条位于顶部且根本没有滚动条的情况下，返回0。

任何想法的人？

Answer 1

假设div上的overflow为auto：

var div= document.getElementById('something'); // need real DOM Node, not jQuery wrapper
var hasVerticalScrollbar= div.scrollHeight>div.clientHeight;
var hasHorizontalScrollbar= div.scrollWidth>div.clientWidth;

Answer 2

// plugtrade.com - jQuery detect vertical scrollbar function //
(function($) {
    $.fn.has_scrollbar = function() {
        var divnode = this.get(0);
        if(divnode.scrollHeight > divnode.clientHeight)
            return true;
    }
})(jQuery);

示例：

if($('#mydiv').has_scrollbar()) { /* do something */ } 

Answer 3

我最后通过执行以下操作找到了解决方案：

用DIV包裹增长的内容，然后通过比较wrapperDiv的高度与containerDiv的高度（通常有滚动条）来检测是否存在（垂直）滚动条如果内容太大了。）

如果wrapperDiv的高度大于containerDiv的高度，则会有一个滚动条，如果它更小，则没有滚动条。

<DIV id="containerDiv" style="width:100px;height:100px;overflow:auto;">
    <DIV id="wrapperDiv">
        .... content here...
    </DIV>
</DIV>

Answer 4

我会修改上面提到的bobince，因为你要求jQuery

var div= $('#something');
var hasVerticalScrollbar= div[0].scrollHeight > div[0].clientHeight;
var hasHorizontalScrollbar= div[0].scrollWidth > div[0].clientWidth;

这是因为scrollHeight和scrollWidth是DOM属性。