Element : é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.
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 scrollsnapchanging de l'interface Element est déclenché sur le conteneur de défilement lorsque le navigateur détermine qu'une nouvelle cible d'alignement de défilement est en attente, c'est-à-dire qu'elle est sélectionnée à la fin du geste de défilement en cours.
Plus précisément, cet évènement se déclenche pendant un geste de défilement, chaque fois que l'utilisateur·ice passe sur de nouvelles cibles d'alignement potentielles. Par exemple, l'utilisateur·ice peut faire défiler lentement en faisant glisser son doigt sur un écran tactile, ou maintenir le bouton de la souris enfoncé sur une barre de défilement et déplacer la souris. scrollsnapchanging peut donc se déclencher plusieurs fois pour chaque geste de défilement.
Cependant, il ne se déclenche pas sur toutes les cibles d'alignement potentielles pour un geste de défilement qui passe sur plusieurs cibles. Il se déclenche uniquement pour la dernière cible sur laquelle l'alignement peut potentiellement se faire.
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("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 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 scrollsnapchanging sur l'élément <main> lorsqu'un de ses enfants devient une cible d'alignement en attente. Dans la fonction de gestion, nous appliquons une classe pending à l'enfant référencé par la propriété snapTargetBlock, qui peut être utilisée pour le mettre en forme différemment lorsque l'évènement se déclenche.
elementDefilable.addEventListener("scrollsnapchanging", (event) => {
// supprime les classes "pending" précédemment définies
const elementAttente = document.querySelectorAll(".pending");
elementAttente.forEach((elem) => {
elem.classList.remove("pending");
});
// Applique la classe "pending" à la cible d'alignement en attente actuelle
event.snapTargetBlock.classList.add("pending");
});
Au début de la fonction, nous sélectionnons tous les éléments qui ont précédemment la classe pending appliquée et la supprimons, de sorte que seule la cible d'alignement en attente la plus récente soit mise en forme.
Spécifications
| Spécification |
|---|
| 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'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)