How to determine if there are scroll bars in a browser window?

Question

I need to determine if there are scrollbars (both vertical and horizontal) in the browser window. I used this code, but it does not work reliably in Firefox 5.

JFL.GetScrollbarState = function () { var myWidth = 0; var myHeight = 0; if (document.documentElement && document.documentElement.clientWidth) { myWidth = document.documentElement.clientWidth; myHeight = document.documentElement.clientHeight; } else { myWidth = document.body.clientWidth; myHeight = document.body.clientHeight; } return ({ vScrollbar: document.body.scrollHeight > myHeight, hScrollbar: document.body.scrollWidth > myWidth }); } 

Is there a better way to do this to work with cross browser. My browser goals are Firefox 4-5, Chrome, Safari 4+, Opera 10+.

If you're wondering why I need to know if there are scrollbars, this is because I have some CSS3 rotary transitions that (due to the nature of their rotation) may temporarily go beyond the current size of the document (thus making the document temporarily larger). If scrollbars were not initially present, the CSS3 transition can cause the scroll bars to appear during the transition, and then go away when the transition is finished, resulting in an ugly scroll flash. If I know that there are no scrollbars, I can temporarily add a class that will hide overflow-x or overflow-y and thus prevent the scrollbar from scrolling during the CSS3 transition. If the scrollbars are already present, I don’t need to do anything because they can move a little, but they will not turn on / off during the transition.

Bonus points if you can really tell not only if scrolling is usually required, but they are actually there or not.

Answer 1

After some browsers (Safari and IE) had a problem with scrolling the version proposed by David, I decided to use this code, which does not have a problem with flicker:

 function getScrollBarState() { var result = {vScrollbar: true, hScrollbar: true}; try { var root = document.compatMode=='BackCompat'? document.body : document.documentElement; result.vScrollbar = root.scrollHeight > root.clientHeight; result.hScrollbar = root.scrollWidth > root.clientWidth; } catch(e) {} return(result); } 

This is a derivative of what I used, and a common technique was mentioned in a post published by fanfavorite. It seems to work in every browser I've tried even in IE6. For my purposes, I wanted any failure to return that there is a scroll bar, so I encoded the failure condition in this way.

Note: this code does not determine if the scrollbar was forcefully turned on or off using CSS. This code determines whether autorun is required or not. If your page may have CSS settings that control the scroll bar, you can get CSS and check this out first.

Answer 2

Have you looked at this post? How to detect the presence of a scrollbar (using Javascript) in an HTML iFrame?

Answer 3

This is actually pretty easy. This will work in all modern browsers:

 // try scrolling by 1 both vertically and horizontally window.scrollTo(1,1); // did we move vertically? if (window.pageYOffset != 0) { console.log("houston, we have vertical scrollbars"); } // did we move horizontally? if (window.pageXOffset != 0) { console.log("houston, we have horizontal scrollbars"); } // reset window to default scroll state window.scrollTo(0,0);