Document : évènement scrollsnapchange
Limited availability
Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.
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 Document est déclenché sur le conteneur de défilement du document à la fin d'une opération de défilement lorsqu'une nouvelle cible d'accrochage 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, à la différence que l'ensemble du document HTML doit être défini comme le conteneur d'accrochage de défilement (c'est-à-dire que scroll-snap-type est défini 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ènements.
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 à l'aide d'une combinaison de propriétés CSS, par exemple :
main {
width: 250px;
height: 450px;
overflow: scroll;
}
Nous pouvons ensuite mettre en place un comportement d'accrochage de défilement 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 fragment de code JavaScript suivant provoquera 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'accrochage sélectionnée. Dans la fonction de gestion, nous appliquons une classe selected à l'enfant référencé par SnapEvent.snapTargetBlock, ce qui peut permettre de le mettre en forme pour indiquer qu'il a été sélectionné (par exemple, avec une animation) lorsque l'évènement se déclenche.
document.addEventListener("scrollsnapchange", (event) => {
event.snapTargetBlock.classList.add("selected");
});
Spécifications
| Specification |
|---|
| 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'accrochage de défilement CSS
- Utiliser les évènements d'accrochage au défilement
- Les évènements d'accrochage au défilement (angl.) sur developer.chrome.com (2024)