Breite des Fensterscrollbalken
Mit dem folgenden Code sollte sich die Breite des Scrollbalken des Browserfenster berechnen lassen.
Es ist nicht die Größe der Scrollbalken im Dokument, d.h. wenn die Schriftgröße geändert wird, passt das Beispiel nicht auf den Scrollbalken im Dokument. Ich habe bisher noch keinen Weg entdeckt, wie sich die Größe der scrollbalken im Dokument berechnen läßt.
function scrollbarWidth() { // Scrollbalken im Body ausschalten document.body.style.overflow = 'hidden'; var width = document.body.clientWidth; // Scrollbalken document.body.style.overflow = 'scroll'; width -= document.body.clientWidth; // Der IE im Standardmode if(!width) width = document.body.offsetWidth-document.body.clientWidth; // ursprüngliche Einstellungen wiederherstellen document.body.style.overflow = ''; return width; } |
Getestet im Standard- und Quirksmode in den Browsern IE 6+7, FF 2.x, MZ und OP 9. Laut Quirksmode müßte es auch im IE 5 funktionieren.
Beispiel
Die Breite der Scrollleiste beträgt: px
Berechnen
Andere Möglichkeiten
auf der Suche nach einer Lösung des Problems fand ich noch diese Seiten, die ebenfalls Möglichkeiten zur Berechnung der Scrollbalken bieten
- Alexander Gomes
- fleegix
Funktioniert leider nicht im IE
ähnliche Artikel
- 28. November 2024 -- Animierte Tabellen Sortierung (10)
Aufgrund einer Frage bei meinem alten Tabellensortierer-Skript...
- 6. August 2019 -- CAS Nummer validieren (0)
Wieder ein kleines Skript aus dem Bereich Chemie. Um...
- 27. Oktober 2012 -- Tween Beispiele (0)
Das Tween Objekt Ich vertiefe hier noch einmal die...
16996 mal gelesen.
11 Kommentare
direkt zum Formular »
Seiten:
4. April 2009: 1:02
Best snippet I’ve seen so far for this task
27. Mai 2010: 22:32
Thanks, but with Firefox 3.6 it seems to always return 0 :S
28. Mai 2010: 12:16
hmm? strange. I also use Fx 3.6 and got always some values.
But meanwhile I am doubt that these values are really useful. I did use it for my combobox script, but I never reached the goal, that I can calculate the real width of scrollbar of the select-field.
24. November 2010: 19:53
Thank you, but I used the function http://www.alexandre-gomes.com/?p=115&cpage=1. When you resize the window scrollbarWidth function returns 0.
18. September 2011: 12:53
Du bist der Hacker! Danke.
One of very few code fragments I haven’t touched, because there’s nothing to improve, it’s perfect (ok, sometimes you may need to store previous document.body.style.overflow – sometimes I force scroll bars on body to avoid layout jumping on reloads with different content lenghts). On Chrome (Linux) it returns zero and it’s correct, because it draws the scrollbars somehow different from FF. I think they are outside container box. Anyway – I needed my rendered component to cover all previous container except scroll bars. So I used this method and gues what – it just works. If it doesn’t – it’s probably a bug in something else. Oh, and I don’t even expect it to work in IE <= 8 (but probably it will work in IE7 and 8).
BTW, it should be the part of jQuery and other JS framework. What's the use of $.fn.innerWidth() if it doesn't report REAL inner width?
28. Juni 2012: 15:02
Hier mal noch was Allgemeineres für beliebige Elemente und deren Breite/Höhe ohne Scrollbalken (woraus man dann natürlich auch die Breite der Scrollbalken errechnen kann – siehe Code). Für Opera und Chrome funktioniert so die Höhe wohl noch nicht, Firefox und IE machen das korrekt (alte Versionen der Browser habe ich nicht getestet). Da die horizontalen und vertikalen Scrollbalken aber sicher gleich breit sind, könnte man auch alles über die Breite berechnen – wer’s braucht, kann das ja anpassen, den Code verbessern oder was auch immer. War nur ne fixe Idee und ist so evtl. auch etwas rechenaufwändig (mit DOM-Manipulation). Scheint übrigens auch noch zu passen, wenn man die Schriftgröße im Browser ändert – hab dazu mal schwarze Balken zum Vergleich neben und unter die Box gebastelt. (nach dem Vergrößern / Verkleinern muss man aber halt das Realtime Preview Dingens aktualisieren – keine Ahnung, ob man das auch über ein Event oder so steuern könnte, bin jetzt auch zu faul danach zu suchen, draußen scheint die Sonne -.-). http://jsbin.com/uyahal/edit#javascript,html,live
28. Juni 2012: 15:03
Ach ja, das ist halt jetzt mit Prototype gemacht, geht mit anderen Frameworks oder ganz ohne sicher auch.
28. Juni 2012: 15:03
Ach ja, ist halt jetzt mit Prototype gemacht, geht sicher auch ohne oder mit anderen Frameworks.
25. Februar 2013: 1:44
das geht in jedem Browser
var _vScrollBarW = function() {
var Obj, width, chkW = 100;
Obj = $create(‚DIV‘);
Obj.style.overflowY = ’scroll‘;
Obj.style.width = chkW + ‚px‘;
Obj.innerHTML = “;
_dBODY[0].appendChild(Obj);
width = chkW – document.getElementById(‚ScrollBarW‘).offsetWidth;
jsF_removeChild(Obj);
return width;
};
alert( _vScrollBarW() );
25. Februar 2013: 1:48
Nachtrag
für $create(‘DIV’) erforderlich
$create = function(elem) {
if(typeof elem == ’string‘) {
return document.createElement(elem);
}
return false;
};
25. Februar 2013: 8:39
Das mag sein, dass das heute funktioniert. Aber das ist komplizierter als die Lösung im Artikel und funktioniert auch nicht in allen Browsern, die zu der Zeit noch aktuell waren.