Javascript 使用jQuery检测DIV中是否存在滚动条?
我想使用jQuery检测DIV中是否存在滚动条。我想使用Javascript 使用jQuery检测DIV中是否存在滚动条?,javascript,jquery,scrollbar,Javascript,Jquery,Scrollbar,我想使用jQuery检测DIV中是否存在滚动条。我想使用$('div').scrollTop(),但在滚动条位于顶部和根本没有滚动条的情况下都返回0 各位有什么想法吗?假设div上的溢出是自动的: var div= document.getElementById('something'); // need real DOM Node, not jQuery wrapper var hasVerticalScrollbar= div.scrollHeight>div.clientHeight
$('div').scrollTop()
,但在滚动条位于顶部和根本没有滚动条的情况下都返回0
各位有什么想法吗?假设div上的
溢出
是自动的:
var div= document.getElementById('something'); // need real DOM Node, not jQuery wrapper
var hasVerticalScrollbar= div.scrollHeight>div.clientHeight;
var hasHorizontalScrollbar= div.scrollWidth>div.clientWidth;
我最终通过以下步骤找到了解决方案:
包装随DIV增长的内容,然后通过比较wrapperDiv
的高度和containerDiv
的高度(如果内容太大,通常有滚动条)来检测是否存在(垂直)滚动条
如果wrapperDiv
的高度大于containerDiv
的高度,则有一个滚动条,如果较小,则没有滚动条
<DIV id="containerDiv" style="width:100px;height:100px;overflow:auto;">
<DIV id="wrapperDiv">
.... content here...
</DIV>
</DIV>
.... 内容在这里。。。
例如:
if($('#mydiv').has_scrollbar()) { /* do something */ }
我将修改上面提到的bobince,因为您需要jQuery
var div= $('#something');
var hasVerticalScrollbar= div[0].scrollHeight > div[0].clientHeight;
var hasHorizontalScrollbar= div[0].scrollWidth > div[0].clientWidth;
这是因为scrollHeight
和scrollWidth
都是DOM属性。see或@moi\u meme+1我正在搜索要在此处发布的问题:p@moi_meme这不适用于DIV,只适用于整个窗口。我试着将它改编成一个DIV,但它似乎不起作用。你试过bobince的解决方案吗?他的似乎没有额外的包装div就可以工作。这不是我发布的第二个链接的答案吗?是的,bobince的解决方案是可行的,但与我上面给出的示例不同,我实际上没有“ID”来处理。我正在使用jQuery CSS选择器进行选择,因此无法使用getElementById访问clientHeight()。另外,我不相信raw.clientHeight值,因为我认为它在不同的浏览器中返回的数字略有不同,不是吗?这也很有效。谢谢但与我发布的解决方案示例不同,在现实世界中,我没有“ID”可供使用,我使用jQuery CSS选择器选择DIV…然后使用jQueryElement.get(0)
从中获取真正的DOM节点。虽然这非常有用,因为它根本不使用任何jQuery,所以这真的是正确答案吗?@DanDiplo记住jQuery只是一个JavaScript库。我相信有人可以/已经编写了一个jQuery插件来进行上述比较。但你真的认为需要抽象层次吗?@WilliamClemens个人认为,不需要,但这正是OP所要求的!与解决此问题的许多其他示例/尝试相比,这是一个很好的解决方案。我确认这在IE、FF和Chrome上有效。
var div= $('#something');
var hasVerticalScrollbar= div[0].scrollHeight > div[0].clientHeight;
var hasHorizontalScrollbar= div[0].scrollWidth > div[0].clientWidth;