Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Detect if the DIV have scroll bar or not [duplicate]

Possible Duplicate:
Detecting presence of a scroll bar in a DIV using jQuery?

There is markup as below,

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

If content have scroll bar, then it should add class to that div like "scroll-image".

Height can be different for DIVs. Any jQuery solution for this.

like image 876
Wasim Shaikh Avatar asked Jun 08 '12 11:06

Wasim Shaikh


3 Answers

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

Taken from How can I check if a scrollbar is visible?

like image 156
472084 Avatar answered Oct 17 '22 20:10

472084


You need to compare scrollHeight with height of the element like this:

$('.content').each(function(){
  if ($(this)[0].scrollHeight > $(this).height()) {
    $(this).addClass('scroll-image');
  }
});
like image 27
Sarfraz Avatar answered Oct 17 '22 20:10

Sarfraz


As esailija said, duplicate of: Detecting presence of a scroll bar in a DIV using jQuery?

The solution there was the following

var div= document.getElementById('something'); // need real DOM Node, not jQuery wrapper
var hasVerticalScrollbar= div.scrollHeight>div.clientHeight;
var hasHorizontalScrollbar= div.scrollWidth>div.clientWidth;
like image 2
altschuler Avatar answered Oct 17 '22 20:10

altschuler