有没有办法使用JQuery查明元素是否在其上有滚动条？

Question

假设我有一个像这样的元素

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

JS或Jquery是否有办法查看$（“＃myDiv”）并查看它是否有滚动条？

谢谢

戴夫

Answer 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());

修改

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

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

Answer 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');
}