检测 DIV 是否有滚动条

Detect if the DIV have scroll bar or not

本文关键字：滚动条 是否 DIV 检测      更新时间：2023-09-26

可能的重复项：
使用 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 添加类。

DIV 的高度可能不同。任何jQuery解决方案。

(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..

取自 如何检查滚动条是否可见？

您需要将scrollHeight与元素的height进行比较，如下所示：

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

正如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;

(function($) {
$.fn.hasScrollBar = function() {
    return this.get(0).scrollHeight > this.height();
}
})(jQuery);
$('div').hasScrollBar(); //return true if it has one

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

相关文章：