Dez 25

Fenstergröße und Scrollposition in Javascript auslesen

Tag: Javascript — Patrick @ 1:36 am

In Anlehnung an den Bericht von Mark Wilton-Jones über die Ermittlung der Fenstergröße (sowohl Höhe als auch Breite) und der Scrollposition möchte ich hier ebenfalls darüber berichten.

Grundsätzlich bestehen 3, zum Teil sehr Browser- und Browsemodusabhänige, Funktionen zum Auslesen der Höhe und Breite des angezeigten Fensters mittels Javascript.

window.innerHeight / window.innerWidth

- Unterstützt von den meisten Browsern, jedoch nicht vom Internet Explorer

document.body.clientHeight / document.body.clientWidth

- Unterstützt von vielen DOM-fähigen Browsern, einschließlich des Internet Explorers.

document.documentElement.­clientHeight / document.documentElement.­clientWidth

- Unterstützt von den meisten DOM-fähigen Browsern, einschließlich des Internet Explorers.

Entsprechend dem Grundwissen und der Tabelle auf howtocreate.co.uk bezüglich der Unterstützung in den verschiedenen Browserversionen baut man sich eine Javascript-Funktion zum Auslesen der Größenangabe des Anzeigefensters zusammen:

function getSize() {
	var myWidth = 0, myHeight = 0;

	if( typeof( window.innerWidth ) == 'number' ) {
		//Non-IE
		myWidth = window.innerWidth;
		myHeight = window.innerHeight;
	} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
		//IE 6+ in 'standards compliant mode'
		myWidth = document.documentElement.clientWidth;
		myHeight = document.documentElement.clientHeight;
	} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
		//IE 4 compatible
		myWidth = document.body.clientWidth;
		myHeight = document.body.clientHeight;
	}
	return [ myWidth, myHeight ];
}

Um die Auszulesen wie weit auf einer Seite gescrollt wurde, verfährt man ganz ähnlich. Wieder stehen 3 Funktionen zur Verfügung.

window.pageYOffset / window.pageXOffset

- Unterstützt von den meisten Browsern, jedoch nicht vom Internet Explorer

document.body.scrollTop / document.body.scrollLeft

- Unterstützt von den einigen Browsern, einschließlich des Internet Explorers.

document.documentElement.scrollTop / document.documentElement.scrollLeft

- Unterstützt von den einigen Browsern, einschließlich des Internet Explorers (strict-mode).

Auch diesmal erstellt entsprechend diesem Wissens eine Javascript-Funktion, die uns die gewünschten Werte liefert:

function getScrollXY() {
	var scrOfX = 0, scrOfY = 0;

	if( typeof( window.pageYOffset ) == 'number' ) {
		//Netscape compliant
		scrOfY = window.pageYOffset;
		scrOfX = window.pageXOffset;
	} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
		//DOM compliant
		scrOfY = document.body.scrollTop;
		scrOfX = document.body.scrollLeft;
	} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
		//IE6 standards compliant mode
		scrOfY = document.documentElement.scrollTop;
		scrOfX = document.documentElement.scrollLeft;
	}
	return [ scrOfX, scrOfY ];
}

13 Antworten zu “Fenstergröße und Scrollposition in Javascript auslesen”

  1. micha sagt:
    Dezember 26th, 2007 at 10:57 pm

    werden diese werte auch zuverlässig ermittelt, wenn das javascript innerhalb von relativ oder absolut positionierten elementen eingesetzt wird?

  2. Patrick sagt:
    Dezember 26th, 2007 at 11:45 pm

    Die ermittelten Werte beziehen sich auf das window- repektive document-Element. Damit sind die Werte unabhängig davon, von wo man die Funktion aufruft. Es spielt also keine Rolle, ob die Funktion innerhalb eines positionieren Elements steht.

  3. Andreas D. sagt:
    Juli 14th, 2008 at 10:19 pm

    Das Ganze kann man sogar noch ein bisschen hübscher und kompakter haben:
    var de = document.documentElement;
    var myWidth = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
    var myHeight = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;

    Funktioniert auch in allen mir bekannten Browsern und müsste sich auch entsprechend auf die Scroll-Position übertragen lassen. Werde ich bei Gelegenheit mal ausprobieren

  4. Patrick sagt:
    Juli 15th, 2008 at 11:27 pm

    Vielen Dank für den Hinweis. Dieses Vorgehen kannte ich bisher noch nicht. Ich werde es ebenfalls testen.

  5. Patrick sagt:
    Juli 17th, 2008 at 4:12 pm

    Ich hab den Vorschlag von Andreas in zwei Funktionen verarbeitet:
    function getWidth() {
    var de = document.documentElement;
    var myWidth = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
    return myWidth;
    }
    document.getWidth=getWidth;

    function getHeight() {
    var de = document.documentElement;
    var myHeight = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;
    return myHeight;
    }
    document.getHeight=getHeight;

    Hier noch zwei Testaufrufe:
    alert(document.getWidth());
    alert(document.getHeight());

    Viel Spaß damit!

  6. Daniel sagt:
    Oktober 30th, 2008 at 12:16 pm

    Firefox (und vielleicht auch andere) unterstützt außerdem window.scrollX und window.scrollY. IE natürlich nicht, bevor jemand fragt…

  7. Spaß! sagt:
    Februar 25th, 2010 at 9:24 am

    Danke, hat mir etwas weitergeholfen bei meinem Problem :)

  8. Meissen sagt:
    März 8th, 2010 at 12:15 am

    Das war genau was ich gesucht habe, vielen Dank an alle…

  9. Anonymous sagt:
    März 11th, 2010 at 10:25 pm

    [...] [...]

  10. rob sagt:
    März 12th, 2010 at 4:52 pm

    sauber

  11. Y Position merken - php.de sagt:
    Juni 18th, 2010 at 11:01 am

    [...] … Fenstergröße und Scrollposition in Javascript auslesen | Ajaxschmiede.de __________________ Ich behandel Objekte wie [...]

  12. Herbert sagt:
    Dezember 9th, 2010 at 2:39 pm

    Guter Tipp, Danke :-)

  13. Atilla sagt:
    September 23rd, 2011 at 10:38 am

    Das hat mir eben wirklich gut weiter geholfen.

    Danke :-)

Hinterlasse einen Kommentar