Fenster ScrollY
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 scrollY
Eigenschaft gibt die Pixel zurück, die ein Dokument von der oberen linken Ecke des Fensters gescrollt hat.
Die scrollY
Eigenschaft ist schreibgeschützt.
Notiz
Das scrollY
Eigentum ist gleich dem
pageYOffset
Eigentum.
Verwenden Sie für browserübergreifende Kompatibilität window.pageYOffset anstelle von window.scrollY.
Siehe auch:
Syntax
window.scrollY
oder nur:
scrollY
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.scrollY
wird in allen Browsern unterstützt:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |