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); };
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)
[…] Alexander Gomes
[…]
Doesn’t look OK to me in
IE7.
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.
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/
Huh, have you ever tried offsetWidth – clientWidth? The result equals scroll
bar size.
@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.
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
Use it as you please![:)](http://www.alexandre-gomes.com/wp-includes/images/smilies/simple-smile.png)
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;
})();
Thanks for finding this out. Most of these scripts won’t work at Webkit, when this does![:)](http://www.alexandre-gomes.com/wp-includes/images/smilies/simple-smile.png)
I’ve used both functions and chose getScrollBarWidth. When you resize the window scrollbarWidth function returns 0.
[…] Scrollbar ruler by Alexandre Gomes […]
[…] Any help would be very much appreciated!The user Dan Herbert answered: I found a function which can get the width of a scrollbar […]
newbie here.
Will the return value from this function also represent the horizontal scrollbar height??
Or do we need a different function for that?
In principle, yes.
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;
}
Hi.
Use ScrollBarWidth() function inside section.