Blog

Get Scrollbar Size Using Javascript

While searching for a snippet of code that could give me the scrollbar width (or height) on the browser I only found this code that does not work at all in IE, only “well-behaved” browsers work, states the author. Later I found this snippet (somewhere in the last result pages of Google) that seemed to be compatible enough however. I had to tune it a little bit because it was using the MooTools library and in the end it didn’t remove the trash elements it creates, which would be a big problem since I’ll be using this when the browser resizes.

After all my work, I ended up with this simple script:

function getScrollBarWidth () {
	var inner = document.createElement('p');
	inner.style.width = "100%";
	inner.style.height = "200px";

	var outer = document.createElement('div');
	outer.style.position = "absolute";
	outer.style.top = "0px";
	outer.style.left = "0px";
	outer.style.visibility = "hidden";
	outer.style.width = "200px";
	outer.style.height = "150px";
	outer.style.overflow = "hidden";
	outer.appendChild (inner);

	document.body.appendChild (outer);
	var w1 = inner.offsetWidth;
	outer.style.overflow = 'scroll';
	var w2 = inner.offsetWidth;
	if (w1 == w2) w2 = outer.clientWidth;

	document.body.removeChild (outer);

	return (w1 - w2);
};

Post to Twitter Post to Delicious Post to Digg Post to Facebook Post to Reddit Post to StumbleUpon

20 Responses to “Get Scrollbar Size Using Javascript”

  1. Struppi says:

    Hello,

    I just also did search for
    something like this. And with the help of Quirksmode (http://www.quirksmode.org/js/doctypes.html) I found this http://javascript.jstruebig.de/javascript/70/ it’s a bit shorter but give the same
    result (as long as I can test it with my Browsers)

  2. alexmipego says:

    Doesn’t look OK to me in
    IE7.

  3. Struppi says:

    I just checked it and it
    works perfect with my IE 7, it both modes.

    You may changed the font size, then even your snippet don’t work correct in all IEs. I didn’t find a way to measure the size of the scrollbars in the
    document you can only find out what’s the system scrollbar size.

  4. gondo says:

    hi
    i had also problems with this by makeing site dopler.sk
    it tricky cose scrollsize is different borowser to browser and it also depends on win theme !
    this rly owned me.
    any
    way, i know its off topic but i made javascript scrollbar so maybe in some way it ll help some1. and it can be found on this
    page
    http://gondo.webdesigners.sk/javascript-scrollbar/

  5. Zach says:

    Huh, have you ever tried offsetWidth – clientWidth? The result equals scroll
    bar size.

  6. alexmipego says:

    @Zach: clientWidth is IE only.
    http://msdn.microsoft.com/en-us/library/ms533566(VS.85).aspx

    Also, iirc clientWidth included padding only and offsetWitdth includes borders and margins, creating a small but significant difference
    for this problem.

  7. Alexey Vishentsev says:

    Hello Alexandre,

    I have published an opensource project gwtspreadsheetinput that use
    this code. Hope you don’t mind.

    Project url: http://code.google.com/p/gwtspreadsheetinput/

    Code url:
    http://code.google.com/p/gwtspreadsheetinput/source/browse/trunk/gwtspreadsheetinput-gwt/src/main/java/com/gwtspreadsheetinput/gwt/client/DynamicGrid.java#359

    If you have any objections please,
    email to me.

    Alexey

  8. alexmipego says:

    Use it as you please :)

  9. Thank you! Below is an updated version of your script, which calculates both width and
    height – it’s wrapped in an anonymous call-once function, and the scrollbar width/height is assigned to the window object so you can reuse it everywhere without calling the function more than once.
    Tested OK in IE6-7-8 (XP and Vista), Firefox 2-3, Opera and Chrome.

    (function(){

    /*
    This function calculates window.scrollbarWidth and window.scrollbarHeight

    This must be called
    “onload” to work correctly (or on “DOM ready”, if you’re using
    a framework that provides such an event)
    */

    var i = document.createElement(‘p’);
    i.style.width = ’100%’;

    i.style.height = ’200px’;

    var o = document.createElement(‘div’);
    o.style.position = ‘absolute’;
    o.style.top = ’0px’;
    o.style.left = ’0px’;
    o.style.visibility =
    ‘hidden’;
    o.style.width = ’200px’;
    o.style.height = ’150px’;
    o.style.overflow = ‘hidden’;
    o.appendChild(i);

    document.body.appendChild(o);
    var w1 = i.offsetWidth;
    var
    h1 = i.offsetHeight;
    o.style.overflow = ‘scroll’;
    var w2 = i.offsetWidth;
    var h2 = i.offsetHeight;
    if (w1 == w2) w2 = o.clientWidth;
    if (h1 == h2) h2 = o.clientWidth;

    document.body.removeChild(o);

    window.scrollbarWidth = w1-w2;
    window.scrollbarHeight = h1-h2;

    })();

  10. iron77 says:

    Thanks for finding this out. Most of these scripts won’t work at Webkit, when this does :)

  11. Dmitry says:

    I’ve used both functions and chose getScrollBarWidth. When you resize the window scrollbarWidth function returns 0.

  12. [...] Scrollbar ruler by Alexandre Gomes [...]

  13. [...] Any help would be very much appreciated!The user Dan Herbert answered: I found a function which can get the width of a scrollbar [...]

  14. ds00424 says:

    newbie here.
    Will the return value from this function also represent the horizontal scrollbar height??
    Or do we need a different function for that?

  15. alexmipego says:

    In principle, yes.

  16. Amin says:

    Hi.
    This is the SHORTEST script to get ScrollBarWidth in html form:
    Nothing else need.

    function ScrollBarWidth()
    {
    t=document.createElement(‘textarea’);
    t.cols = 1;
    t.rows = 1;
    t.style.visibility=’hidden’;
    t.style.border=’none’;
    document.body.appendChild(t);
    w=t.offsetWidth-t.clientWidth;
    document.body.removeChild (t);
    return w;
    }

  17. Amin says:

    Hi.

    Use ScrollBarWidth() function inside section.

  18. Wei says:

    Hi Alexandre,

    I am just curious.
    Do you have a specific license that you want to put this tool under?

    Best Regards,

    Wei

  19. alexmipego says:

    It’s public domain.

Leave a Reply

For spam filtering purposes, please copy the number 3710 to the field below: