Document : évènement scroll
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
L'évènement scroll de l'interface Document est déclenché lorsque la vue du document a été défilée.
Pour détecter lorsque le défilement est terminé, voir l'évènement scrollend de Document.
Pour le défilement des éléments, voir l'évènement scroll de Element.
Syntaxe
Utilisez le nom de l'évènement dans des méthodes comme addEventListener(), ou définissez une propriété de gestionnaire d'évènements.
addEventListener("scroll", (event) => { })
onscroll = (event) => { }
Type d'évènement
Un objet Event générique.
Exemples
Limiter la fréquence de l'évènement de défilement
Comme les évènements scroll peuvent se déclencher à un rythme élevé, le gestionnaire d'évènements ne doit pas exécuter des opérations coûteuses en calcul, telles que des modifications du DOM. Si vous remarquez un ralentissement lors d'un défilement rapide, vous devriez envisager de limiter la fréquence l'évènement.
Notez que vous pouvez rencontrer du code qui limite la fréquence du gestionnaire d'évènements scroll en utilisant requestAnimationFrame(). Cela est inutile car les rappels d'image d'animation sont déclenchés à la même fréquence que les gestionnaires d'évènements scroll. À la place, vous devez mesurer le délai vous-même, par exemple en utilisant setTimeout().
let lastKnownScrollPosition = 0;
let ticking = false;
function doSomething(scrollPos) {
// Faire quelque chose avec la position de défilement
}
document.addEventListener("scroll", (event) => {
lastKnownScrollPosition = window.scrollY;
if (!ticking) {
// Limiter la fréquence de l'évènement pour "faire quelque chose" toutes les 20ms
setTimeout(() => {
doSomething(lastKnownScrollPosition);
ticking = false;
}, 20);
ticking = true;
}
});
De plus, vous pouvez envisager d'utiliser IntersectionObserver à la place, ce qui permet une écoute basée sur des seuils.
Spécifications
| Specification |
|---|
| CSSOM View Module # eventdef-document-scroll |
| HTML # handler-onscroll |