Window : é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.
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 scrollsnapchanging de l'interface Window est déclenché sur la window 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 lorsque le geste de défilement en cours se termine.
Cet évènement fonctionne de la même manière que l'évènement scrollsnapchanging 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("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 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 scrollsnapchanging sur le document HTML lorsqu'un enfant de l'élément <main> devient une nouvelle cible d'alignement en attente. Dans la fonction de gestionnaire, nous définissons une classe pending sur l'enfant référencé par la propriété snapTargetBlock, qui peut être utilisée pour le mettre en forme afin qu'il semble être en attente lorsque l'évènement se déclenche.
window.addEventListener("scrollsnapchanging", (event) => {
// supprimer les classes « pending » précédemment définies
const pendingElems = document.querySelectorAll(".pending");
pendingElems.forEach((elem) => {
elem.classList.remove("pending");
});
// Définir la classe de la cible d'alignement en attente actuelle sur « pending »
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 de défilement en attente la plus récente soit mise en forme.
Spécifications
| Spécification |
|---|
| CSS Scroll Snap Module Level 2 # scrollsnapchanging |
CCompatibilité 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 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)