Défilement de la fenêtreX
Exemple 1
Faites défiler le contenu de 100 pixels, et alertez les scrollX et scrollY :
window.scrollBy(100, 100);
alert(window.scrollX + window.scrollY);
Plus d'exemples ci-dessous.
Définition et utilisation
La scrollX
propriété renvoie les pixels qu'un document a défilé depuis le coin supérieur gauche de la fenêtre.
La scrollX
propriété est en lecture seule.
Noter
La scrollX
propriété est égale à la
pageXOffset
propriété.
Pour la compatibilité entre navigateurs, utilisez window.pageXOffset au lieu de window.scrollX.
Voir également:
Syntaxe
window.scrollX
ou juste:
scrollX
Valeur de retour
Taper | La description |
Un numéro | Le nombre de pixels que le document a défilé depuis le coin supérieur gauche de la fenêtre. |
Plus d'exemples
Créez une barre de navigation collante :
// 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");
}
}
Prise en charge du navigateur
window.scrollX
est pris en charge dans tous les navigateurs :
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |