Window scrollX-eigenschap

Definitie en gebruik

scrollX eigenschap retourneert het aantal pixels dat het document van het linkerbovenhoek van het venster naar beneden wordt gescrolld.

scrollX eigenschap is alleen lezen.

Waarschuwing

scrollX eigenschap is gelijk aan pageXOffset eigenschap.

Gebruik voor crossbrowser-compatibiliteit: window.pageXOffset In plaats van window.scrollX.

Zie ook:

pageXOffset-eigenschap

pageYOffset-eigenschap

Voorbeeld

Voorbeeld 1

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

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

Probeer het zelf uit

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 aan de scrollpositie arrives, 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 uit

Syntaxis

window.scrollX

Ofwel:

scrollX

Retourwaarde

Type Beschrijving
Getal Het aantal pixels dat van het linkerbovenhoek van het venster naar beneden wordt gescrolld.

Browser Support

All Browsers Support window.scrollX:

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