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.
javascript
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
Comments (5)
9863 mal gelesen.
9863 mal gelesen.
5 Comments
Einen Kommentar hinterlassen »
Kommentare
Samstag 4.April 2009: 01:02
Best snippet I've seen so far for this task
Donnerstag 27.Mai 2010: 22:32
Thanks, but with Firefox 3.6 it seems to always return 0 :S
Freitag 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.
Mittwoch 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.
Sonntag 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?
Einen Kommentar hinterlassen