当前位置：文江博客话题详情

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

发布于 2024-08-29 09:22:08 字数 126 浏览 5 评论 0原文

我想使用 jQuery 检测 DIV 中是否存在滚动条。我正在考虑使用 $('div').scrollTop() 但当滚动条位于顶部和根本没有滚动条时，这两种情况都会返回 0。

大家有什么想法吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

凌乱心跳 2024-09-05 09:22:08

假设 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;

Assuming overflow on the div is 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;

回复收藏 0 原文

深陷 2024-09-05 09:22:08

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

example:

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

回复收藏 0 原文

窝囊感情。 2024-09-05 09:22:08

好吧，我最终通过执行以下操作找到了解决方案：

包装随 DIV 增长的内容，然后通过将 wrapperDiv 的高度与containerDiv（如果内容太大，通常会有滚动条）。

如果wrapperDiv的高度大于containerDiv的高度则有滚动条，如果小于则没有滚动条。

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

Well I ended up finding a solution by doing the following:

Wrap the content that grows with a DIV, then I detect if a (vertical) scroll bar is present by comparing the height of wrapperDiv with the height of containerDiv (which normally has the scroll bar if the content is too large).

If the height of wrapperDiv is bigger than the height of containerDiv then there is a scroll bar, if it is smaller, then there is no scroll bar.

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

回复收藏 0 原文

云淡风轻 2024-09-05 09:22:08

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

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

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

I will revise what bobince mentioned above since you are asking for jQuery

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

This is because scrollHeight and scrollWidth are DOM properties.

回复收藏 0 原文

~没有更多了~