CODEWITHSUNDEEP
jquery
Nasir
Nasir

Reputation: 4865

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

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

Upvotes: 4

Views: 10232

Answers (2)

niksvp
niksvp

Reputation: 5563

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

Upvotes: 9

Matt Asbury
Matt Asbury

Reputation: 5662

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);
    }
}

Upvotes: 4

Related Questions