À partir de Chrome 129, vous pouvez utiliser les événements scrollSnapChange
et scrollSnapChanging
à partir de JavaScript. En implémentant des événements de recadrage intégrés, l'état de recadrage précédemment invisible devient exploitable, au bon moment et toujours correct. Vous n'auriez pas pu bénéficier de cette fonctionnalité sans ces événements.
Avant scrollSnapChange
, vous pouviez utiliser un observateur d'intersection pour déterminer quel élément croisait le port de défilement, mais la détermination de ce qui était épinglé était limitée à quelques cas. Par exemple, vous pouvez détecter si les éléments d'ancrage remplissent le port de défilement ou la majeure partie de celui-ci. Pour ce faire, vous devez observer les éléments qui se croisent dans la zone de défilement. Ensuite, en fonction de l'élément qui occupe la majeure partie de la zone de défilement, vous devez supposer qu'il s'agit de la cible d'ancrage. Vous devez ensuite attendre scrollend
et agir sur l'élément ancré (la cible d'ancrage).
Toutefois, avant scrollSnapChanging
, il était impossible de savoir quand la cible d'ancrage change ou en quoi elle change (par exemple, en cas de balayage).
Un curseur horizontal est affiché avec des zones numérotées à l'intérieur en tant que cibles de recadrage. À gauche, vous trouverez un journal en temps réel des événements scrollSnapChange, avec la valeur snapTargetInline en bleu. Sur la droite, vous trouverez un journal en temps réel des événements scrollSnapChanging, avec la valeur snapTargetInline mise en surbrillance en gris.
Essayez-le
https://codepen.io/web-dot-dev/pen/jOjaaEP
Bonne nouvelle : ces nouveaux événements vous permettent d'accéder à ces informations rapidement et facilement. Cela permet d'étendre les interactions de repères de défilement au-delà de leurs capacités actuelles et d'orchestrer les relations de repères de défilement et les nouveaux scénarios de commentaires sur l'interface utilisateur.
scrollSnapChange
Cet événement ne se déclenche que si un geste de défilement a entraîné l'ajout d'une nouvelle cible d'ancrage, et dans l'ordre suivant :
- Une fois la barre de défilement arrêtée.
- Avant
scrollend
.
Cet événement se déclenche juste avant scrollend
, lorsque le défilement est terminé et uniquement si une nouvelle cible d'ancrage a été sélectionnée. L'événement semble donc paresseux ou juste-à-temps lorsque le geste de défilement est terminé.
scroller.addEventListener('scrollsnapchange', event => {
console.log(event.snapTargetBlock);
console.log(event.snapTargetInline);
})
scroller.onscrollsnapchange = event => {
console.log(event.snapTargetBlock);
console.log(event.snapTargetInline);
}
L'événement expose l'élément épinglé sur l'objet d'événement en tant que snapTargetBlock
et snapTargetInline
. Si la barre de défilement est horizontale uniquement, la propriété snapTargetBlock
est null
. La valeur de la propriété sera le nœud de l'élément.
Informations uniques pour scrollSnapChange
Ne se déclenche pas tant que l'utilisateur n'a pas relâché son geste
Si un doigt reste sur l'écran ou sur un pavé tactile, cela signifie que le geste de l'utilisateur n'a pas encore terminé le défilement, ce qui signifie que le défilement n'est pas terminé, ce qui signifie que la cible d'ancrage n'a pas encore changé, elle est en attente d'un geste utilisateur complet.
Ne se déclenche pas si la cible d'ancrage n'a pas changé
L'événement est destiné à la modification de l'ancrage. Si la cible d'ancrage n'a pas changé, l'événement ne se déclenche pas, même si un utilisateur a interagi avec le défileur. L'utilisateur a toutefois fait défiler la page. Par conséquent, l'événement scrollend
se déclenche toujours à la fin du défilement.
scrollSnapChanging
Cet événement se déclenche dès que le navigateur a déterminé que le geste de défilement a généré ou générera une nouvelle cible d'ancrage. Il se déclenche avec empressement et pendant le défilement.
scroller.addEventListener('scrollsnapchanging', event => {
console.log(event.snapTargetBlock);
console.log(event.snapTargetInline);
})
scroller.onscrollsnapchanging = event => {
console.log(event.snapTargetBlock);
console.log(event.snapTargetInline);
}
L'événement expose l'élément épinglé sur l'objet d'événement en tant que snapTargetBlock
et snapTargetInline
. Si la barre de défilement est verticale uniquement, la propriété snapTargetInline
est null
. La valeur de la propriété sera le nœud de l'élément.
Informations uniques pour scrollSnapChanging
Se déclenche tôt et souvent lors d'un geste de défilement
Contrairement à scrollSnapChange
, qui attend un geste de défilement complet de l'utilisateur, cet événement se déclenche dès que l'utilisateur fait défiler l'écran avec son doigt ou à l'aide d'un pavé tactile. Imaginons qu'un utilisateur fasse défiler l'écran lentement sans lever le doigt. scrollSnapChanging
se déclenchera plusieurs fois pendant le geste, tant que l'utilisateur balaie l'écran sur plusieurs cibles de recadrage potentielles. Chaque fois que l'utilisateur fait défiler la page, si le navigateur a déterminé qu'à la fin du défilement, il se trouverait sur une nouvelle cible d'ancrage, l'événement se déclenche pour vous indiquer de quel élément il s'agit.
Ne déclenche pas toutes les cibles de recadrage sur le chemin vers une nouvelle cible de recadrage
Imaginons un "fling", où un utilisateur effectue un geste de balayage qui s'étend sur plusieurs cibles de recadrage à la fois. Cet événement se déclenchera une fois avec la cible sur laquelle l'utilisateur s'arrêtera. Il est donc impatient, mais pas inutile, et vous fournit la cible de recadrage dès que possible.
Cas d'utilisation et exemples
Ces événements permettent de créer de nombreux nouveaux cas d'utilisation, tout en rendant les modèles actuels beaucoup plus faciles à implémenter. Un exemple concret est l'activation de l'animation déclenchée par un ancrage. Affichage contextuel de l'élément d'ancrage, de ses enfants ou des informations associées lorsqu'il s'agit de la cible d'ancrage.
Les modèles suivants illustrent certains cas d'utilisation pour vous aider à être immédiatement productif.
Mettre en avant un témoignage
Cet exemple met en avant ou met l'accent visuellement sur le témoignage capturé.
scroller.onscrollsnapchange = event => {
scroller.querySelector(':scope .snapped')?.classList.remove('snapped')
event.snapTargetInline.classList.add('snapped')
}
Afficher le libellé de l'élément épinglé
Cet exemple montre la légende de l'élément épinglé. Les deux événements sont inclus dans cette démonstration afin que vous puissiez voir les différences de timing et d'expérience utilisateur entre scrollSnapChange
et scrollSnapChanging
.
Aperçu Changement
https://codepen.io/web-dot-dev/pen/wvLPPBL
Instantané Change
https://codepen.io/web-dot-dev/pen/QWXOObw
Animez une fois les enfants d'une diapositive de présentation figée.
Cet exemple sait quand une nouvelle diapositive est affichée et que l'utilisateur s'y arrête, ce qui est le moment idéal pour animer le contenu une fois.
document.addEventListener('scrollsnapchange', event => {
event.snapTargetBlock.classList.add('seen')
})
Ancrage sur les axes X et Y dans un dispositif de défilement
Le point d'ancrage du défilement fonctionne pour les défileurs qui permettent le défilement horizontal et vertical. Cette démonstration affiche à la fois les cibles scrollSnapChanging
et scrollSnapChange
lorsque vous faites défiler la grille. Cette démonstration montre que l'élément auquel le navigateur s'ancre n'est pas toujours celui que vous pensez.
Une grille de carrés dans un défilement horizontal et vertical s'affiche. La bordure en pointillés représente la cible scrollSnapChanging, et la bordure en trait continu la cible scrollSnapChange. Le rouge représente snapTargetInline et le bleu snapTargetBlock.
Deux barres de défilement associées
Cette démonstration comporte deux conteneurs de recadrage de défilement, l'un étant une liste de liens de haut niveau et l'autre le contenu paginé. Le nouvel événement scrollSnapChanging
permet d'associer les états d'ancrage de ces éléments de manière bidirectionnelle afin qu'ils soient toujours synchronisés.
Sélecteur de couleur OKLCH
Cette démonstration comporte trois curseurs, chacun représentant un canal de couleur différent dans OKLCH. L'élément épinglé est synchronisé avec son groupe de boutons radio correspondant, et les données peuvent être récupérées à partir d'un formulaire encapsulant les entrées. Pour un utilisateur de souris ou d'écran tactile, vous pouvez faire défiler l'écran jusqu'à la valeur souhaitée. Si vous utilisez un clavier, vous pouvez utiliser la touche Tabulation et les touches fléchées. Pour un lecteur d'écran, il ne s'agit que d'un formulaire.
scrollSnapChanging permet de synchroniser de manière anticipée l'élément épinglé avec l'état, tandis que scrollSnapChange permet d'animer l'en-tête du canal de couleur concerné auquel l'entrée utilisateur a été appliquée.
https://codepen.io/web-dot-dev/pen/OJeOOVGAncrage de hubs animés décalés
Cette démonstration améliore progressivement l'expérience de glissement avec des transitions déclenchées par un accrochage à l'aide de scrollsnapchange
.
Vérifiez la prise en charge des événements avec le code JavaScript suivant:
if ('onscrollsnapchange' in window) {
// ok to use snap change
}
Saisie de règle à faire défiler
Cette démonstration présente une règle à faire défiler comme autre moyen de choisir une longueur pour une entrée numérique. Saisissez les valeurs directement dans le champ de saisie numérique ou faites défiler la taille. L'événement "change" permet d'effacer la sélection pendant le geste de l'utilisateur, tandis que l'événement "change" permet de mettre à jour l'état et de renforcer le choix de l'utilisateur.
Flux de couverture
Cette démonstration s'appuie sur l'excellente recréation de l'animation basée sur le défilement de Bramus Van Damme du célèbre flux de couvertures de macOS (tutoriel vidéo également). scrollSnapChanging
permet de masquer le titre de l'album, tandis que scrollSnapChange
permet de le présenter. Les événements permettent d'orchestrer un masquage rapide de l'ancien titre et une présentation lente du nouveau.
Autres idées pour stimuler la créativité
Maintenant que vous pouvez facilement savoir quel élément est sur le point d'être ancré et lequel est actuellement ancré, de nombreuses nouvelles possibilités s'offrent à vous. Voici une liste d'idées pour vous inspirer et découvrir d'autres cas d'utilisation:
- Déclenchement du chargement paresseux, appelé "rendu déclenché par un changement instantané" ou "récupère des données".
- Vignettes de film en bande liées à une image plus grande
- Activer/Désactiver la lecture d'une bande-annonce vidéo pour une miniature de vidéo épinglée
- Suivi Analytics
- Scrollytelling
- Interface utilisateur/Expérience utilisateur de Wheel of Fortune
- La cible de recadrage reçoit une info-bulle ancrée.
- Appuyer pour ancrer
- Accrocher pour afficher
- Sons sur les clichés
- UI de balayage
- Onglets ou carrousels à faire défiler
Autres études
L'équipe Chrome est impatiente de découvrir ce que vous allez créer avec ces nouvelles API et espère qu'elles vous aideront à simplifier vos expériences de défilement.