Propriété scrollX de la fenêtre

Définition et utilisation

scrollX Propriété retourne le nombre de pixels défilés du document depuis le coin supérieur gauche de la fenêtre.

scrollX Propriété est lecture seule.

Indication

scrollX Propriété égale à Propriété pageXOffset propriété.

Pour la compatibilité entre navigateurs, utilisez window.pageXOffset au lieu de window.scrollX.

Veuillez également consulter :

Propriété pageXOffset

Propriété pageYOffset

Exemple

Exemple 1

Déplacez le contenu de 100 pixels et indiquez scrollX et scrollY :

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

Essayez-le vous-même

Exemple 2

Créer une navigation collée :

// Obtenez la barre de navigation
const navbar = document.getElementById("navbar");
// Obtenez la position d'offset de la barre de navigation
const sticky = navbar.offsetTop;
// Ajoutez la classe sticky à la barre de navigation lorsque vous atteignez sa position de défilement. Supprimez la classe sticky lorsque vous quittez la position de défilement.
function myFunction() {
  if (window.scrollY >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

Essayez-le vous-même

Syntaxe

window.scrollX

ou :

scrollX

Valeur de retour

Type Description
Numéro Le nombre de pixels défilés depuis le coin supérieur gauche de la fenêtre.

Support du navigateur

Tous les navigateurs prennent en charge window.scrollX：

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