Dez 25
Fenstergröße und Scrollposition in Javascript auslesen
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 ];
}
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?
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.
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
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.
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!
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…
Februar 25th, 2010 at 9:24 am
Danke, hat mir etwas weitergeholfen bei meinem Problem 🙂
März 8th, 2010 at 12:15 am
Das war genau was ich gesucht habe, vielen Dank an alle…
März 11th, 2010 at 10:25 pm
[…] […]
März 12th, 2010 at 4:52 pm
sauber
Juni 18th, 2010 at 11:01 am
[…] … Fenstergröße und Scrollposition in Javascript auslesen | Ajaxschmiede.de __________________ Ich behandel Objekte wie […]
Dezember 9th, 2010 at 2:39 pm
Guter Tipp, Danke 🙂
September 23rd, 2011 at 10:38 am
Das hat mir eben wirklich gut weiter geholfen.
Danke 🙂
April 24th, 2012 at 7:02 pm
Funktioniert! Klasse, vielen Dank – diese IEs, ich dachte da wird mal etwas besser… =)
Juni 22nd, 2012 at 10:28 am
[…] Jetzt muss man feststellen ob das div#infiniteSpinner im sichtbaren Bereich des Nutzers ist. Auch hier spielen IE7 und IE8 ihr eigenes Spiel, daher nutzte ich zur Bestimmung der Scrollposition im Browser die Funktion getScrollXY() von Ajaxschmiede.de. […]
April 28th, 2013 at 3:09 pm
Der Vorschlag von Patrik funktioniert! 🙂
Danke Dir!
Januar 4th, 2014 at 6:33 am
var D = document;
var myHeight = Math.max(
D.body.scrollHeight, D.documentElement.scrollHeight,
D.body.offsetHeight, D.documentElement.offsetHeight,
D.body.clientHeight, D.documentElement.clientHeight
);
alert(myHeight);
Januar 4th, 2014 at 10:07 pm
Danke, es funktioniert!
Ich habe nur ein Problem mit der Scrollfunktion (in Firefox):
document.write(„„);
hier soll ein Button sein, der per Klick an den Anfang der Website verweist und beim herunterscrollen eingeblendet wird. Der Button wird aber nur sichtbar, wenn man herunterscrollt und dann die Seite aktualisiert! Wie kann man es anstellen, dass der Scrollwert immer aktuell ist?
Januar 4th, 2014 at 10:09 pm
Der Code wird nicht angezeigt! Ich versuchs noch mal:
document.write(\“\“);
Januar 4th, 2014 at 10:11 pm
document.write();
Januar 4th, 2014 at 10:15 pm
läuft stressfrei mit WordPress???
September 7th, 2014 at 7:41 am
Das sollte dann die kurze zum scrollen sein. (Nicht getested)
var doE = document.documentElement;
var scrollX = window.pageXOffset || self.pageXOffset || (doE&&doE.scrollLeft) || document.body.scrollLeft;
var scrollY = window.pageYOffset || self.pageYOffset || (doE&&doE.scrollTop) || document.body.scrollTop;