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

Question

我希望使用jQuery检测DIV中是否存在滚动条。我想使用$('div').scrollTop()，但无论滚动条是否在顶部或根本没有滚动条，它都会返回0。有什么建议吗？

- 7wp

---

检测使用jQuery是否存在滚动条仍然困难吗？ - moi_meme

使用jQuery检测元素是否溢出。 - moi_meme

@moi_meme +1 我正在寻找那个问题在这里发布:p - fmsf

@moi_meme 这仅适用于整个窗口而非DIV。我尝试将其调整为DIV，但似乎不起作用。 - 7wp

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;

- bobince

---

这也可以。谢谢。但与我发布的解决方案示例不同，在现实世界中，我没有“IDs”可供使用，我是使用jQuery CSS选择器选择DIV... - 7wp

使用jQueryElement.get(0)获取其真实的DOM节点，参考链接：http://api.jquery.com/get。 - BalusC

虽然这很有用，但它真的是正确的答案吗？因为它根本没有使用任何jQuery？ - Dan Diplo

请记住，jQuery只是JavaScript库。我相信有人可以/已经编写了一个jQuery插件来执行上述比较。但您真的认为需要那种抽象层次吗？ - William Clemens

@WilliamClemens 个人而言，不是，但这是 OP 所问的！ - Dan Diplo

我不明白，我的页面出现了垂直滚动条，但变量hasVerticalScrollbar始终为false。我确定我已经声明了div作为我想要的DOM标签。 - Alex

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 */ } 

- PlugTrade

---

与其他尝试解决此问题的示例相比，这是一个很好的解决方案。我确认在IE、FF和Chrome上都可以工作。 - carrabino

Answer 3

由于你在问 jQuery，我会修改上面 bobince 提到的内容。

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

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

- Musikero31

Answer 4

我最终通过以下方式找到了解决方法：

使用 DIV 包装随内容而增长的内容，然后比较 wrapperDiv 的高度与包含滚动条的 containerDiv 的高度来检测是否存在（垂直）滚动条。

如果 wrapperDiv 的高度大于 containerDiv 的高度，则存在滚动条；否则不存在滚动条。

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

- 7wp

---

你试过bobince的解决方案吗？他的解决方案似乎可以在不需要额外包装div的情况下工作。 - Justin Johnson

这不是我发布的第二个链接中的答案吗？https://dev59.com/6nI95IYBdhLWcg3w_zSs - moi_meme

是的，bobince的解决方案可以奏效，但与我上面给出的示例不同，我实际上没有“IDs”可用。我正在使用jQuery CSS选择器进行选择，因此无法使用getElementById来访问clientHeight()。而且我不相信原始的.clientHeight值，因为我认为它在不同的浏览器中返回略有不同的数字，不是吗？ - 7wp