Document : évènement scrollsnapchanging
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 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é 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 scrollsnapchanging sur le document HTML lorsqu'un enfant de l'élément <main> devient une cible d'accrochage en attente. Dans la fonction de gestion, nous appliquons une classe pending à l'enfant référencé par la propriété snapTargetBlock, ce qui peut permettre de le mettre en forme différemment lorsque l'évènement se déclenche.
document.addEventListener("scrollsnapchanging", (event) => {
// supprimer les classes "pending" précédemment appliquées
const pendingElems = document.querySelectorAll(".pending");
pendingElems.forEach((elem) => {
elem.classList.remove("pending");
});
// Appliquer la classe "pending" à la cible d'accrochage en attente
event.snapTargetBlock.classList.add("pending");
});
Au début de la fonction, nous sélectionnons tous les éléments qui avaient précédemment la classe pending et nous la supprimons, afin que seule la cible d'accrochage en attente la plus récente soit mise en forme.
Spécifications
| Specification |
|---|
| CSS Scroll Snap Module Level 2 # scrollsnapchanging |
Compatibilité des navigateurs
Voir aussi
- L'évènement
scrollsnapchange - 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)