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
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
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.