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'); = "100%"; = "200px";

	var outer = document.createElement('div'); = "absolute"; = "0px"; = "0px"; = "hidden"; = "200px"; = "150px"; = "hidden";
	outer.appendChild (inner);

	document.body.appendChild (outer);
	var w1 = inner.offsetWidth; = '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

18 Responses to “Get Scrollbar Size Using Javascript”

  1. Struppi says:


    I just also did search for
    something like this. And with the help of Quirksmode ( I found this 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

  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:

    i had also problems with this by makeing site
    it tricky cose scrollsize is different borowser to browser and it also depends on win theme !
    this rly owned me.
    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

  5. Zach says:

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

  6. alexmipego says:

    @Zach: clientWidth is IE only.

    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:

    Code url:

    If you have any objections please,
    email to me.


  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.


    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’); = ‘100%’; = ‘200px’;

    var o = document.createElement(‘div’); = ‘absolute’; = ‘0px’; = ‘0px’; =
    ‘hidden’; = ‘200px’; = ‘150px’; = ‘hidden’;

    var w1 = i.offsetWidth;
    h1 = i.offsetHeight; = ‘scroll’;
    var w2 = i.offsetWidth;
    var h2 = i.offsetHeight;
    if (w1 == w2) w2 = o.clientWidth;
    if (h1 == h2) h2 = o.clientWidth;


    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:

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

    function ScrollBarWidth()
    t.cols = 1;
    t.rows = 1;’hidden’;’none’;
    document.body.removeChild (t);
    return w;

  17. Amin says:


    Use ScrollBarWidth() function inside section.

Leave a Reply

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