Question

I need to be able to detect whether there are scrollbars (both vertical and horizontal) on a browser window. I’ve been using this code but it isn’t working 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 that will work cross browser. My browser targets are Firefox 4-5, Chrome, Safari 4+, Opera 10+.

If you’re interested in why I need to know if there are scrollbars, it’s because I have some spinning CSS3 transitions that (due to the nature of their spinning) may temporarily go beyond the edges of the current document size (thus making the document temporarily larger). If were no scrollbars initially present, the CSS3 transition may cause scrollbars to show up during the transition and then go away when the transition is finished, leading to an ugly scrollbar flash. If I know that there are no scrollbars present, I can temporarily add a class that will set overflow-x or overflow-y to hidden and thus prevent the scrollbar flash during the CSS3 transition. If scrollbars are already present, I don’t have to do anything because they may move a little, but they won’t go on/off during the transition.

Bonus points if one can actually tell not only if scrollbars would generally be required, but whether they are actually there or not.

Answer 1

After running into flicker problems with the scrolling version proposed by David in some browsers (Safari and IE), I’ve settled on this code that does not have the flicker problem:

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

It’s a derivative of what I was using and the general technique was referenced in the post that fanfavorite posted. It seems to work in every browser I’ve tried even in IE6. For my purposes, I wanted any failure to return that there was a scrollbar so I’ve coded the failure condition that way.

Note: this code does not detect if a scrollbar has been forced on or off with CSS. This code detects if an auto-scrollbar is called for or not. If your page might have CSS settings that control the scrollbar, then you can get the CSS and check that first.