finding the DOM scrollbar width

Question

I would like to find the pixel width of the vertical and horizontal scrollbars. I know that they are different for different OSes/browsers.

I found this code that attempts to detect it, but alas, it doesnt seem to work on IE7:

function scrollbarWidth() {
    var scrollbarWidth = 0;                    
    if ($.browser.msie) {
        var $textarea1 = $('<textarea cols="10" rows="2"></textarea>')
        .css({ position: 'absolute', top: -1000, left: -1000 }).appendTo('body'),
        $textarea2 = $('<textarea cols="10" rows="2" style="overflow: hidden;"></textarea>')
        .css({ position: 'absolute', top: -1000, left: -1000 }).appendTo('body');
        scrollbarWidth = $textarea1.width() - $textarea2.width() + 2; // + 2 for border offset
        $textarea1.add($textarea2).remove();
    } else {
        var $div = $('<div />')
        .css({ width: 100, height: 100, overflow: 'auto', position: 'absolute', top: -1000, left: -1000 })
        .prependTo('body').append('<div />').find('div')
        .css({ width: '100%', height: 200 });
        scrollbarWidth = 100 - $div.width();
        $div.parent().remove();
    }
    return scrollbarWidth;
}

Answer 1

This function should give you the width of the vertical scrollbar:

function scrollbarWidth()
{
    var outer = document.createElement("div");
    outer.style.visibility = "hidden";
    outer.style.width = "100px";

    // for win 8
    outer.style.msOverflowStyle = "scrollbar";

    document.body.appendChild(outer);

    var widthNoScroll = outer.offsetWidth;

    // force scrollbars
    outer.style.overflow = "scroll";

    // add innerdiv
    var inner = document.createElement("div");
    inner.style.width = "100%";
    outer.appendChild(inner);        

    var widthWithScroll = inner.offsetWidth;

    // remove divs
    outer.parentNode.removeChild(outer);

    return widthNoScroll - widthWithScroll;
}

The main steps of this function are the following:

• Create an outer div of width 100px

• Then forces the scrollbar to appear in the outer div

• Create a new inner div and append inside the outer div. Set its height to 100%

• Calculate the difference between both widths.

Similarly, you can also get both the width of the vertical scrollbar, and the height of the horizontal scrollbar, setting a given height to the outer div, and calculating also the height difference of both divs, like this:

function scrollbarWidthHeight()
{
    var outer = document.createElement("div");
    outer.style.visibility = "hidden";
    outer.style.width = "100px";
    outer.style.height = "100px";

    // for win 8
    outer.style.msOverflowStyle = "scrollbar";

    document.body.appendChild(outer);

    var widthNoScroll = outer.offsetWidth;
    var heightNoScroll = outer.offsetHeight;

    // force scrollbars
    outer.style.overflow = "scroll";

    // add innerdiv
    var inner = document.createElement("div");
    inner.style.width = "100%";
    inner.style.height = "100%";
    outer.appendChild(inner);        

    var widthWithScroll = inner.offsetWidth;
    var heightWithScroll = inner.offsetHeight;

    // remove divs
    outer.parentNode.removeChild(outer);

    return {
        width: widthNoScroll - widthWithScroll,
        height: heightNoScroll - heightWithScroll
    };
}

Tested in chrome, firefox, IE6, IE8, and safari. It also uses native JavaScript (DOM functions), and doesn't use external dependencies like jQuery :)

Answer 2

Why are you trying to do this? Some context would be nice. If you're trying to make custom theme-able scrollbars, there are many scripts to do this, a good one being jQuery Scrollbars.