Detecting if a DIV has a scrollbar or not

Question

Possible duplicate:
Detecting scrollbar presence in a div using jQuery?

There is markup as shown 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 the content has a scroll bar, then it should add a class to this div as a scroll-image.

Height may vary for DIV. Any jQuery solution for this.

Answer 1

 (function($) { $.fn.hasScrollBar = function() { return this.get(0).scrollHeight > this.height(); } })(jQuery); $('#my_div1').hasScrollBar(); // returns true if there a `vertical` scrollbar, false otherwise.. 

Taken from How to check the scrollbar visibility?

Answer 2

You need to compare scrollHeight with element height as follows:

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

Answer 3

As esailija said, duplicate: Detecting scrollbar presence in DIV using jQuery?

The solution was as follows

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

Answer 4

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

Source: How to check the scrollbar visibility?