检测DIV是否有滚动条

Question

以下是标记：

可能是重复问题：
使用jQuery检测DIV中是否存在滚动条？

如下所示，有些标记:

<div class="content">Lorem</div>
<div class="content">Lorem Iorem Lorem Iorem Lorem Iorem Lorem Iorem Lorem IoremLorem Iorem Lorem Iorem Lorem Iorem</div>
<div class="content">Lorem</div>
<div class="content">Lorem</div>

如果内容有滚动条，则应将类添加到该div，如“scroll-image”。

高度可以不同于DIV。 有没有jQuery解决方案。

- Wasim Shaikh

---

也许可以检查当前高度是否大于起始高度？ - silentw

Answer 1

(function($) {
    $.fn.hasScrollBar = function() {
        return this.get(0).scrollHeight > this.height();
    }
})(jQuery);

$('#my_div1').hasScrollBar(); // returns true if there's a `vertical` scrollbar, false otherwise..

本文摘自如何检查滚动条是否可见？

- 472084

---

您已有声望，为什么不投票关闭？ - Esailija

我在移动屏幕上遇到了0.5像素的问题，添加 Math.round 后解决了我的问题： return Math.round(this.get(0).scrollHeight) > Math.round(this.outerHeight()); - Guillaume Lhz

Answer 2

您需要像这样比较元素的scrollHeight和height：

$('.content').each(function(){
  if ($(this)[0].scrollHeight > $(this).height()) {
    $(this).addClass('scroll-image');
  }
});

- Sarfraz

---

你拥有权限，为什么不进行关闭投票？ - Esailija

@Esailija：正在写答案，没看到 :) 完成了。 - Sarfraz

Answer 3

如esailija所说，这是一个重复的问题：使用jQuery检测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;

- altschuler

Answer 4

(function($) {
$.fn.hasScrollBar = function() {
    return this.get(0).scrollHeight > this.height();
}
})(jQuery);

$('div').hasScrollBar(); //return true if it has one

来源：如何检查滚动条是否可见？

- Johan