Window scrollY-eigenschap

Definitie en gebruik

scrollY De eigenschap retourneert het aantal pixels dat het document van linksboven naar beneden is gescrolld.

scrollY De eigenschap is alleen-lezen.

Waarschuwing

scrollY eigenschap is gelijk aan pageYOffset eigenschap.

Gebruik voor crossbrowser-compatibiliteit a.u.b. de window.pageYOffset In plaats van window.scrollY.

Zie ook:

pageXOffset-eigenschap

pageYOffset-eigenschap

Voorbeeld

Voorbeeld 1

Scroll het inhoud 100 pixels en geef scrollX en scrollY weer:

window.scrollBy(100, 100);
alert(window.scrollX + window.scrollY);

Probeer het zelf

Voorbeeld 2

Maak een sticky navigatiebalk:

// Haal de navigatiebalk op
const navbar = document.getElementById("navbar");
// Haal de offsetpositie van de navigatiebalk op
const sticky = navbar.offsetTop;
// Voeg de sticky-klasse toe aan de navigatiebalk wanneer je de scrollpositie bereikt. Verwijder de sticky-klasse wanneer je de scrollpositie verlaat.
function myFunction() {
  if (window.scrollY >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

Probeer het zelf

Syntax

window.scrollY

Ofwel:

scrollY

Terugkeerwaarde

Type Beschrijving
Getal Aantal pixels dat het document van linksboven naar beneden is gescrolld.

Browser ondersteuning

All browsers support window.scrollY:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support 9-11 Support Support Support Support