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: What is wrong with the code then? isn't it working for you?
• Nasir: @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
• niksvp: your problem is not clear. is that you are not getting jQuery effect? fadeIn/Out?
• Nasir: @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?
• User4567: Check this url Detect if a page has a vertical scrollbar?

Answer 1

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

• Kevin Borders: This might not work if elements in your document have a fixed or absolute position.

Answer 2

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

• Nasir: @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
• Matt Asbury: Could you edit some of you code into your question to demonstrate what you are trying to accomplish?
• Nasir: @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: I need the fading effects to take place when the page height is toggled...I'm thinking something to do with .live() function
• Nasir: @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