Detecting presence of a scroll bar in a DIV using jQuery?

Question

I want to detect the presence of a scroll bar in a DIV using jQuery. I was thinking to use $('div').scrollTop() but that returns 0 in both cases when the scroll bar is at the top and when there is no scroll bar at all.

Any ideas guys?

see http://stackoverflow.com/questions/2571514/is-detecting-scrollbar-presence-with-jquery-still-difficult — moi_meme, Apr 15 '10 at 17:58
or http://stackoverflow.com/questions/2059743/detect-elements-overflow-using-jquery — moi_meme, Apr 15 '10 at 17:59
@moi_meme +1 i was searching for that question to post here :p — fmsf, Apr 15 '10 at 18:00
@moi_meme that does not work for DIV's only for the entire window. I tried adapting it to a DIV but it doesent appear to work. — 7wp, Apr 15 '10 at 18:16

score 48 · Accepted Answer · answered Apr 15 '10 at 18:41

48

Assuming overflow on the div is auto:

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

answered Apr 15 '10 at 18:41

bobince

528,062
107
651
834

This works too. Thanks. But unlike in my solution example I posted, In the real world I don't have "IDs" to work with, i am selecting the DIV using jQuery CSS selectors... – 7wp Apr 15 '10 at 19:01
10

Then use `jQueryElement.get(0)` to get the real DOM node from it http://api.jquery.com/get. – BalusC Apr 15 '10 at 19:09
Whilst this is really useful, is it really the correct answer since it doesn't use any jQuery at all? – Dan Diplo Apr 27 '10 at 15:56
4

@DanDiplo Remember jQuery is just a JavaScript Library. I'm sure someone could/has written a jQuery plug-in to do the comparison above. But do you really think that level of abstraction is needed? – William Clemens Jul 15 '12 at 18:28
@WilliamClemens Personally, no, but that is what the OP asked! – Dan Diplo Jul 20 '12 at 11:32
I don't understand, my page got a v scrollbar, but the var hasVerticalScrollbar is always false. For sure I declared div as to be the DOM tag I want. – Alex Nov 21 '14 at 15:19

PlugTrade · Answer 2 · 2012-01-31T11:38:13.947

19

// plugtrade.com - jQuery detect vertical scrollbar function //
(function($) {
    $.fn.has_scrollbar = function() {
        var divnode = this.get(0);
        if(divnode.scrollHeight > divnode.clientHeight)
            return true;
    }
})(jQuery);

example:

if($('#mydiv').has_scrollbar()) { /* do something */ }

edited Jan 31 '12 at 11:38

answered Jan 23 '12 at 12:36

PlugTrade

837
11
19

2

Great solution compared to the many other examples/attempts to address this issue. I confirmed that this works on IE, FF and Chrome. – carrabino Mar 25 '14 at 14:34

score 0 · Answer 3 · answered Apr 15 '10 at 18:46

0

Well I ended up finding a solution by doing the following:

Wrap the content that grows with a DIV, then I detect if a (vertical) scroll bar is present by comparing the height of wrapperDiv with the height of containerDiv (which normally has the scroll bar if the content is too large).

If the height of wrapperDiv is bigger than the height of containerDiv then there is a scroll bar, if it is smaller, then there is no scroll bar.

<DIV id="containerDiv" style="width:100px;height:100px;overflow:auto;">
    <DIV id="wrapperDiv">
        .... content here...
    </DIV>
</DIV>

answered Apr 15 '10 at 18:46

7wp

12,505
20
77
103

Did you try bobince's solution? His seems like it would work without the extra wrapper div. – Justin Johnson Apr 15 '10 at 18:52
wasn't that the answer from the second link i posted? http://stackoverflow.com/questions/2059743/detect-elements-overflow-using-jquery – moi_meme Apr 15 '10 at 18:59
Yes bobince's solution would work, but unlike in the example i gave above I don't actually have "IDs" to work with. I'm selecting using jQuery CSS selectors, so I can't use getElementById in order to access clientHeight(). plus I dont trust the raw .clientHeight value as I think it returns slightly different numbers in different browsers, doesen't it? – 7wp Apr 15 '10 at 19:04

score 0 · Answer 4 · answered Jun 01 '16 at 09:47

I will revise what bobince mentioned above since you are asking for jQuery

var div= $('#something');
var hasVerticalScrollbar= div[0].scrollHeight > div[0].clientHeight;
var hasHorizontalScrollbar= div[0].scrollWidth > div[0].clientWidth;

This is because scrollHeight and scrollWidth are DOM properties.

Detecting presence of a scroll bar in a DIV using jQuery?

4 Answers4

Linked

Related