How do I find out whether the browser window has a scrollbar visible, in JQuery?

Question

I was wondering if there is a way of finding out whether a browser window has a scrollbar visible, in JQuery?

Here's the code I'm working with:

var hContent = $("body").height(); 
var hWindow = $(window).height(); 

if(hContent>hWindow) {
    $('#scroll-top').fadeIn(250);    
}
else {
    $('#scroll-top').fadeOut(250);
}

Any help is Greatly Appreciated, Thanks

@niksvp - I need to somehow implement live to this so it picks up when there isnt a scrollbar visible...any ideas? I cant really test it at the moment because the page height is always greater than the viewport on page load — Nasir, Jan 06 '11 at 11:44
your problem is not clear. is that you are not getting jQuery effect? fadeIn/Out? — niksvp, Jan 06 '11 at 11:56
@niksvp - OK let me simplify, if the browser window has a vertical scroll, show #scroll-top...else hide #scroll-top. Problem: I have elements on my page that I can toggle therefore adjusting the page height...how do I get #scroll-top to disappear if I collapse/toggle all elements on the page? — Nasir, Jan 06 '11 at 12:38
Check this url [Detect if a page has a vertical scrollbar?](http://stackoverflow.com/questions/2146874/detect-if-a-page-has-a-vertical-scrollbar) — User4567, Oct 26 '15 at 08:27

score 9 · Accepted Answer · edited May 29 '13 at 19:15

9

Use the following function.

function checkScrollBar() {
    var hContent = $("body").height(); // get the height of your content
    var hWindow = $(window).height();  // get the height of the visitor's browser window

    // if the height of your content is bigger than the height of the 
    // browser window, we have a scroll bar
    if(hContent>hWindow) { 
        return true;    
    }

    return false;
}

edited May 29 '13 at 19:15

Uwe Keim

39,551
56
175
291

answered Jan 06 '11 at 10:50

niksvp

5,545
2
24
41

1

This might not work if elements in your document have a fixed or absolute position. – Kevin Borders Jun 07 '13 at 21:08

Matt Asbury · Answer 2 · 2011-01-06T11:57:10.073

4

What happens if you compare (window).height() to (document).height() if the document height is greater than the window height then a scrollbar should be visible but this also depends on your CSS settings and whether overflow is hidden or visible.

EDIT

You need to create a listener in order for the code to run at the right time. This should work when the browser window is resized:

$(window).resize(function(){
    var hContent = $("body").height(); 
    var hWindow = $(window).height(); 

    if(hContent>hWindow) {
        $('#scroll-top').fadeIn(250);    
    }
    else {
        $('#scroll-top').fadeOut(250);
    }
}

edited Jan 06 '11 at 11:57

answered Jan 06 '11 at 10:48

Matt Asbury

5,644
2
21
29

@Matt - My document has a scroller but can be toggled so it is shortened in height...There is a element I want to show when the browser window has a scroller. Sorry I'm a novice at JavaScript/JQuery – Nasir Jan 06 '11 at 10:53
Could you edit some of you code into your question to demonstrate what you are trying to accomplish? – Matt Asbury Jan 06 '11 at 11:05
@Matt...I have added the code I'm working with to the question. I hope it gives you some insight into what I'm trying to achieve, Thanks – Nasir Jan 06 '11 at 11:28
I need the fading effects to take place when the page height is toggled...I'm thinking something to do with .live() function – Nasir Jan 06 '11 at 11:30
@Matt - You're on the right track...I need the listener to execute when the document height is greater OR less than the browser viewport(live)...The tricky bit is that on my document I can toggle elements to change the document height :S – Nasir Jan 06 '11 at 12:25
If you change "body" to document, does that work? It should calculate the height of the document every time it changes. – Matt Asbury Jan 06 '11 at 12:57

How do I find out whether the browser window has a scrollbar visible, in JQuery?

2 Answers2