Fenster scrollX
Beispiel 1
Scrollen Sie den Inhalt um 100 Pixel und alarmieren Sie scrollX und scrollY:
window.scrollBy(100, 100);
alert(window.scrollX + window.scrollY);
Weitere Beispiele unten.
Definition und Verwendung
Die scrollX
Eigenschaft gibt die Pixel zurück, die ein Dokument von der oberen linken Ecke des Fensters gescrollt hat.
Die scrollX
Eigenschaft ist schreibgeschützt.
Notiz
Das scrollX
Eigentum ist gleich dem
pageXOffset
Eigentum.
Verwenden Sie für browserübergreifende Kompatibilität window.pageXOffset anstelle von window.scrollX.
Siehe auch:
Syntax
window.scrollX
oder nur:
scrollX
Rückgabewert
Typ | Beschreibung |
Eine Zahl | Die Anzahl der Pixel, um die das Dokument von der oberen linken Ecke des Fensters gescrollt wurde. |
Mehr Beispiele
Erstellen Sie eine Sticky-Navigationsleiste:
// Get the navbar
const navbar = document.getElementById("navbar");
// Get the offset position of the navbar
const sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position. Remove the sticky class when you leave the scroll position.
function myFunction() {
if (window.scrollY >= sticky) {
navbar.classList.add("sticky")
}
else {
navbar.classList.remove("sticky");
}
}
Browser-Unterstützung
window.scrollX
wird in allen Browsern unterstützt:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |