检测DIV是否有滚动条

时间:2012-06-08 11:33:24

标签: javascript jquery html css

  

可能重复:
  Detecting presence of a scroll bar in a DIV using jQuery?

有以下标记,

<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解决方案。

4 个答案:

答案 0 :(得分:27)

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

取自How can I check if a scrollbar is visible?

答案 1 :(得分:5)

您需要将scrollHeightheight元素进行比较,如下所示:

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

答案 2 :(得分:2)

正如esailija所说,副本:Detecting presence of a scroll bar in a DIV using jQuery?

解决方案有以下

var div= document.getElementById('something'); // need real DOM Node, not jQuery wrapper
var hasVerticalScrollbar= div.scrollHeight>div.clientHeight;
var hasHorizontalScrollbar= div.scrollWidth>div.clientWidth;

答案 3 :(得分:0)

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

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

来源:How can I check if a scrollbar is visible?