有没有办法使用 JQuery 找出元素上是否有滚动条？答案

【问题标题】：Is there a way to find out if an element has a scrollbar on it using JQuery?有没有办法使用 JQuery 找出元素上是否有滚动条？
【发布时间】：2018-02-07 18:54:02
【问题描述】：

假设我有一个这样的元素

<div id="myDiv" style="height:10px; width:100px; overflow:scroll;"> 
   random amount of lorem ipsum... 
</div>

在 JS 或 Jquery 中有没有办法查看 $("#myDiv") 并查看它是否有滚动条？

谢谢

戴夫

【问题讨论】：

标签： javascript jquery jquery-selectors

【解决方案1】：

这应该可以工作

$.fn.hasVerticalScrollBar = function () {
     return this[0].clientHeight < this[0].scrollHeight;
}

$.fn.hasHorizontalScrollBar = function () {
    return this[0].clientWidth < this[0].scrollWidth;
}

用法

alert($('#mydivid').hasHorizontalScrollBar());
alert($('#mydivid').hasVerticalScrollBar());

编辑：

要将此方法与 invisible 元素一起使用，请克隆 div，将其不透明度设置为 0，将克隆附加到正文，检查克隆是否有滚动条，然后删除克隆：

var clone = $('#mydivid').clone();
clone.css('opacity', '0').appendTo('body');
if (clone.hasHorizontalScrollBar()) {
   //do the job here
}
clone.remove();

【讨论】：

为您修正了几个错别字。 +1 是一个很好的答案，尽管this may play up in Opera。
@lonesomeday 好吧，我使用了大多数浏览器...Opera 仅占市场的一小部分
当 div 在页面上不可见时，这将不起作用。 stackoverflow.com/questions/30637577/…。为了解决这个问题，我克隆了我的 div，将其不透明度设置为 0，将克隆附加到正文，检查克隆是否有滚动条，然后删除克隆。

【解决方案2】：

您可以将文本包装在另一个 div 中，并将该文本的宽度/高度与 #myDiv 进行比较。如果它更高，则有一个滚动条：

<div id="myDiv" style="..."> 
    <div id="inner">random amount of lorem ipsum...</div>
</div>

例子：

if( $('#inner').height() > $('#myDiv').height() ){
  alert('vertical scrollbar');
}

if( $('#inner').width() > $('#myDiv').width() ){
  alert('horizontal scrollbar');
}

【讨论】：

.. 如果内部 div 上有填充或边距，这将不起作用，因为 mydiv 总是会更大。