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

I've tested on two different IE7 and both worked. It came back as 19px for me. — VVV, Sep 27 '12 at 13:15
If this is really a problem for you (and if possible) you could always use some custom scrollbars (with jScrollPane) that way the width of the scrollbars would be defined by you. — VVV, Sep 27 '12 at 13:16
Possible duplicate of [Getting scroll bar width using JavaScript](http://stackoverflow.com/questions/13382516/getting-scroll-bar-width-using-javascript) — lostsource, Jul 19 '16 at 15:22
I wouldn't have asked this question if i had a time machine and could find that duplicate — mkoryak, Jul 20 '16 at 17:46

canolucas · Accepted Answer · 2015-05-02T01:31:16.097

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 :)

score 0 · Answer 2 · answered Oct 02 '12 at 01:48

0

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.

answered Oct 02 '12 at 01:48

Nate Higgins

2,104
16
21

I am trying to make a floating table header plugin. its width must be container width - scrollbar width. like this: http://programmingdrunk.com/floatThead/ – mkoryak Oct 02 '12 at 11:55

finding the DOM scrollbar width

2 Answers2