TIPP: Scrollbarbreite herausfinden (Plattformunabhängig)

[tobias.beuth]

Hallo,

dies ist für alle die die Breite der Scrollbars in ihr Layout mit einbeziehen müssen

Die Breite/Höhe der Scrollbars im Browser ist bekanntlich auf verschiedenen Plattformen und mit ggf. unterschiedlichen Themes für den Browser unterschiedlich.

Ich hatte ab und zu ein Problem damit dass diese Breite total variabel ist.

Normalerweise mache ich dann Browserabfragen und messe vorher die Breite der Dinger. Ist aber sehr aufwendig, und man kann nie alle Browser miteinbeziehen.

Heute ist mir die Lösung dieses Problems eingefallen die ich euch hiermit in Form einer js-Funktion spenden möchte:

function getScrollbarDimension () {
sb_cont = document.createElement("DIV");
sb_cont.style.overflow = "auto";
sb_cont.style.position = "absolute";
sb_cont.style.width = "100";
sb_cont.style.height = "100";
sb_cont.style.top = "0";
sb_cont.style.left = "0";
sb_cont.style.visibility = "visible";
sb_push = document.createElement("DIV");
sb_push.style.width = "100%";
sb_push.style.height = "300";
sb_push.style.visibility = "hidden";
sb_bodys = document.getElementsByTagName("body");
sb_body = sb_bodys[0];
sb_body.appendChild(sb_cont);
sb_old_width = sb_cont.style.width;
sb_cont.appendChild(sb_push);
dummy = parseInt(sb_old_width) - parseInt(sb_push.offsetWidth);
sb_scrollbarwidth = parseInt(sb_old_width) - parseInt(sb_push.offsetWidth);
sb_body.removeChild(sb_cont);

return sb_scrollbarwidth;
}

P.S. - Wer wissen möchte wie es funktioniert:
Dynamisch ein Div(overflow:auto) erstellen das ein anders Div (width:100%) enthält. Das innere Div auf eine Überlänge vergrössern. OffsetWidth des inneren Divs messen und von der ursprünglichen Breite des Divs abziehen.

Vielleicht kann ja ausser mit noch jemand damit etwas anfangen.