Window : é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.
Vous voulez une meilleure prise en charge pour cette fonctionnalité ? Dites-nous pourquoi.
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 Window est déclenché sur la window à la fin d'une opération de défilement lorsqu'une nouvelle cible d'alignement de défilement est sélectionnée.
Cet évènement fonctionne de la même manière que l'évènement scrollsnapchange de l'interface Element, sauf que le document HTML global doit être défini comme conteneur de défilement avec alignement (c'est-à-dire que la propriété scroll-snap-type est définie sur l'élément <html>).
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 en utilisant une combinaison de propriétés CSS, par exemple :
main {
width: 250px;
height: 450px;
overflow: scroll;
}
Nous pouvons ensuite implémenter le comportement de défilement avec alignement sur le contenu défilant en définissant la propriété scroll-snap-type sur l'élément <html> :
html {
scroll-snap-type: block mandatory;
}
Le bout de code JavaScript suivant provoque le déclenchement de l'évènement scrollsnapchange sur le document HTML lorsqu'un enfant de l'élément <main> devient une nouvelle cible d'alignement sélectionnée. Dans la fonction de gestionnaire, nous définissons une classe selected sur l'enfant référencé par le SnapEvent.snapTargetBlock, qui peut être utilisée pour le mettre en forme afin qu'il semble avoir été sélectionné (par exemple, avec une animation) lorsque l'évènement se déclenche.
window.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 de défilement CSS
- Utiliser les évènements de défilement avec alignement
- Évènements de défilement avec alignement (angl.) sur developer.chrome.com (2024)