Document : évènement scrollend
Baseline
2025
Newly available
Depuis December 2025, cette fonctionnalité fonctionne sur les appareils et les versions de navigateur les plus récents. Elle peut ne pas fonctionner sur les appareils ou navigateurs plus anciens.
L'évènement scrollend de l'interface Document se déclenche lorsque la vue du document a terminé son défilement.
Le défilement est considéré comme terminé lorsque la position de défilement n'a plus de mises à jour en attente et que l'utilisateur·ice a terminé son geste.
Les mises à jour de la position de défilement incluent le défilement à la molette de souris, fluide ou instantané, le défilement au clavier, les évènements d'accrochage du défilement, ou d'autres API et gestes qui provoquent une mise à jour de la position de défilement. Les gestes utilisateur·ice·s comme le glissement tactile ou le défilement au pavé tactile ne sont terminés que lorsque les pointeurs ou les touches ont été relâchés. Si la position de défilement n'a pas changé, aucun évènement de fin de défilement n'est déclenché.
Pour détecter lorsque le défilement à l'intérieur d'un élément est terminé, voir l'évènement scrollend 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("scrollend", (event) => { })
onscrollend = (event) => { }
Type d'évènement
Un objet Event générique.
Exemples
Utiliser l'évènement scrollend de Document avec un écouteur d'évènements
L'exemple suivant montre comment utiliser l'évènement scrollend avec un écouteur d'évènements pour détecter lorsque l'utilisateur·ice a arrêté de faire défiler le document.
Dans l'exemple, il y a du contenu dans le cadre intégrée qui est plus grand et plus large que le cadre intégré elle-même, donc le défilement à l'intérieur de le cadre intégré dans les deux directions est possible.
Lorsque l'utilisateur·ice arrête de faire défiler, l'évènement scrollend se déclenche :
<div class="box-wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<p id="output">En attente des événements de défilement...</p>
const output = document.querySelector("p#output");
document.addEventListener("scroll", (event) => {
output.textContent = "Événement de défilement du document déclenché !";
});
document.addEventListener("scrollend", (event) => {
output.textContent = "Événement de fin de défilement du document déclenché !";
});
Utiliser la propriété de gestionnaire d'évènements onscrollend
L'exemple suivant montre comment utiliser la propriété de gestionnaire d'évènements scrollend pour détecter lorsque l'utilisateur·ice a arrêté de faire défiler le document.
Dans l'exemple, il y a du contenu dans le cadre intégrée qui est plus grand et plus large que le cadre intégré elle-même, donc le défilement à l'intérieur de le cadre intégré dans les deux directions est possible.
Cela s'appuie sur le premier exemple, mais utilise document.onscrollend au lieu d'un écouteur d'évènements :
<div class="box-wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<p id="output">En attente des événements de défilement...</p>
document.onscroll = (event) => {
output.textContent = "Événement de défilement du document déclenché !";
};
document.onscrollend = (event) => {
output.textContent = "Événement de fin de défilement du document déclenché !";
};
Spécifications
| Specification |
|---|
| CSSOM View Module # eventdef-document-scrollend |
| HTML # handler-onscrollend |