Javascript ist Toll!

1. September 2007 - 11:41

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

Ähnliche Artikel

  • 27. Oktober 2012 -- Tween Beispiele (0)

    Das Tween Objekt Ich vertiefe hier noch einmal die Verwendung meines Tween Objektes. Hier zeigt sich, wie einfach und effektiv es sich nutzen lässt. Der Code um eine Animations zu erzeugen ist sehr...

  • 22. Juni 2012 -- Tween(2) (0)

    Die Technik um mit Javascript eine Bewegung zu animieren hatte ich in einem älteren Artikel bereits beschrieben und kündigte dort eine Fortsetzung an. Doch das Skript, was ich dort verwendet habe, hat...

  • 15. Juni 2012 -- Wordpress und Javascript (2)

    In der letzten Zeit durfte ich mich etwas intensiver mit Wordpress beschäftigen und bin dabei einer Lösung eines alten Problems auf die Spur gekommen. Seit anbeginn hat mich Wordpress hier im Blog...

Comments (11)
12735 mal gelesen.
flattr

11 Kommentare

Hinterlasse einen Kommentar »

Seiten:

1. Kommentar von: Tomasz Mazur
4. April 2009: 01:02

Best snippet I’ve seen so far for this task

2. Kommentar von: Mario
27. Mai 2010: 22:32

Thanks, but with Firefox 3.6 it seems to always return 0 :S

3. Kommentar von: Struppi
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.

4. Kommentar von: Dmitry
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.

5. Kommentar von: HTD
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?

6. Kommentar von: Konsi B.
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

7. Kommentar von: Konsi B.
28. Juni 2012: 15:03

Ach ja, das ist halt jetzt mit Prototype gemacht, geht mit anderen Frameworks oder ganz ohne sicher auch.

8. Kommentar von: Konsi B.
28. Juni 2012: 15:03

Ach ja, ist halt jetzt mit Prototype gemacht, geht sicher auch ohne oder mit anderen Frameworks.

9. Kommentar von: Robert
25. Februar 2013: 01: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() );

10. Kommentar von: Robert
25. Februar 2013: 01:48

Nachtrag

für $create(‘DIV’) erforderlich

$create = function(elem) {
if(typeof elem == ‘string’) {
return document.createElement(elem);
}
return false;
};

11. Kommentar von: Struppi
25. Februar 2013: 08: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.

Hinterlasse einen Kommentar

Name (erforderlich)
Mail (wird nicht angezeigt) (erforderlich)
Website

Folgende HTML Tags sind erlaubt: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



Powered by WordPress Stop Spam Harvesters, Join Project Honey Pot kostenloser Counter Browser-Statistiken
rats-wonderful
rats-wonderful
rats-wonderful
rats-wonderful