Element : évènement scrollsnapchange
Disponibilité limitée
Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.
Want more browser support for this feature? Tell us why.
Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.
L'évènement scrollsnapchange de l'interface Element est déclenché sur le conteneur de défilement à la fin d'une opération de défilement lorsqu'une nouvelle cible d'alignement de défilement a été sélectionnée, juste avant que l'évènement correspondant scrollend ne se déclenche.
Une opération de défilement se termine lorsque l'utilisateur·ice a fini·e de faire défiler un conteneur de défilement — par exemple en utilisant un geste tactile ou en faisant glisser le pointeur de la souris sur une barre de défilement — et relâche le geste.
Syntaxe
Utilisez le nom de l'évènement dans des méthodes comme addEventListener(), ou définissez une propriété de gestionnaire d'évènement.
addEventListener("scrollsnapchange", (event) => { })
onscrollsnapchange = (event) => { }
Type d'évènement
Exemples
Utilisation simple
Supposons que nous ayons un élément HTML <main> contenant un contenu important qui provoque son défilement :
<main>
<!-- Contenu important -->
</main>
L'élément <main> peut être transformé en conteneur de défilement qui s'aligne sur ses enfants lorsqu'on le fait défiler en utilisant une combinaison de la propriété CSS scroll-snap-type et d'autres propriétés. Par exemple :
main {
width: 250px;
height: 450px;
overflow: scroll;
scroll-snap-type: block mandatory;
}
Le fragment JavaScript suivant provoque le déclenchement de l'évènement scrollsnapchange sur l'élément <main> lorsqu'un de ses enfants devient une nouvelle cible d'alignement sélectionnée. Dans la fonction de gestion, nous appliquons une classe selected à l'enfant référencé par la propriété SnapEvent.snapTargetBlock, qui peut être utilisée pour la mise en forme afin qu'il semble avoir été sélectionné (par exemple, avec une animation) lorsque l'évènement se déclenche.
const elementDefilable = document.querySelector("main");
elementDefilable.addEventListener("scrollsnapchange", (event) => {
event.snapTargetBlock.classList.add("selected");
});
Spécifications
| Spécification |
|---|
| CSS Scroll Snap Module Level 2 # scrollsnapchange |
Compatibilité des navigateurs
Voir aussi
- L'évènement
scrollsnapchanging - L'évènement
scrollend - L'interface
SnapEvent - La propriété CSS
scroll-snap-type - Le module d'alignement au défilement CSS
- Utiliser les évènements d'alignement au défilement
- Les évènements d'alignement au défilement (angl.) sur developer.chrome.com (2024)