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

发布于 2024-10-01 13:51:26 字数 245 浏览 2 评论 0原文

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

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

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

谢谢

戴夫

原文

Let say I have an element like so

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

Is there a way in JS or Jquery to look at $("#myDiv") and see if it has scrollbars?

Thanks

Dave

分享到QQ

分享到微博

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

发布评论

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

清君侧 2024-10-08 13:51:26

这应该有效

$.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();

This should work

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

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

Usage

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

EDIT:

To use this method with invisible element, clone the div, set its opacity to 0, append the clone to the body, check if the clone has the scroll bar and then remove the clone:

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

回复收藏 0 原文

三人与歌 2024-10-08 13:51:26

您可以将文本包装在另一个 div 中，并将该 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');
}

You could wrap the text in another div, and compare the width/height of that one with #myDiv. If it's taller, there is a scrollbar:

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

Example:

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

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

回复收藏 0 原文

~没有更多了~