Document : évènement scrollsnapchanging
Disponibilité limitée
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 scrollsnapchanging de l'interface Document est déclenché sur le conteneur de défilement lorsque le navigateur détermine qu'une nouvelle cible d'accrochage de défilement est en attente, c'est-à-dire qu'elle sera sélectionnée lorsque le geste de défilement en cours prendra fin.
Cet évènement fonctionne de la même manière que l'évènement scrollsnapchanging 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("scrollsnapchanging", (event) => { })
onscrollsnapchanging = (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é