À partir de Chrome 129, vous pouvez utiliser les événements scrollSnapChange
et scrollSnapChanging
de JavaScript. Grâce à l'implémentation d'événements d'ancrage intégrés, l'état d'ancrage auparavant invisible devient exploitable, au bon moment et toujours correct. Sans ces événements, vous n'étiez pas là pour vous simplifier la vie.
Avant scrollSnapChange
, vous pouviez utiliser un observateur d'intersection pour trouver quel élément traversait le port de défilement, mais la détermination de ce qui était ancré était limitée à quelques circonstances. Par exemple, vous pouvez détecter si les éléments d'ancrage remplissent le port de défilement ou s'ils occupent la majeure partie du port de défilement. Pour ce faire, vous devez observer des intersections de la zone de défilement, puis, en fonction de l'élément qui occupe la majeure partie de la zone de défilement, supposez qu'il s'agit de la cible d'ancrage, puis attendez scrollend
et agissez sur l'élément ancré (la cible d'ancrage).
Toutefois, avant scrollSnapChanging
, il était impossible de savoir quand la cible de l'ancrage change ou à quoi elle est modifiée (par exemple, lors d'un glissement de défilement).
Défilement horizontal avec des cases numérotées à l'intérieur représentant des cibles d'ancrage. Sur la gauche, vous pouvez voir un journal en temps réel des événements "scrollSnapChange", mis en surbrillance en bleu pour "SnapTargetInline". Sur la droite se trouve un journal en temps réel des événements déroulantSnapChangement, avec le paramètre "SnapTargetInline" encadré en gris.
Bonne nouvelle ! Avec ces nouveaux événements, vous pouvez accéder à ces informations rapidement et facilement. Cela permet d'obtenir des interactions d'ancrage de défilement qui vont au-delà de leur capacité actuelle, et d'orchestrer les relations d'ancrage du défilement et de nouveaux scénarios de retour d'interface utilisateur.
scrollSnapChange
Cet événement ne se déclenche que si un geste de défilement a entraîné le blocage d'une nouvelle cible d'ancrage, dans l'ordre suivant :
- Une fois que le parchemin est resté en marche.
- Avant le
scrollend
.
Cet événement se déclenche juste avant scrollend
, à la fin du défilement, et uniquement si une nouvelle cible d'ancrage était en attente. Ainsi, l'événement semble paresseux ou juste à temps une fois le geste de défilement 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 ancré à l'objet événement en tant que snapTargetBlock
et snapTargetInline
. Si le conteneur de défilement est horizontal uniquement, la propriété snapTargetBlock
sera null
. La valeur de la propriété sera le nœud de l'élément.
Détails uniques pour dropSnapChange
Ne se déclenche pas tant que l'utilisateur n'a pas libéré son geste
Un doigt encore sur l'écran ou les doigts du pavé tactile indiquent que le geste de l'utilisateur n'a pas fini de faire défiler, ce qui signifie que le défilement n'est pas terminé, ce qui signifie que la cible d'ancrage n'a pas encore changé et qu'un geste utilisateur complet est en attente.
Ne se déclenche pas si la cible de l'ancrage n'a pas été modifiée
L'événement est destiné à la modification de l'ancrage. Si la cible de l'ancrage n'est pas modifiée, l'événement ne se déclenchera pas, même si un utilisateur a interagi avec le conteneur de défilement. Cependant, l'utilisateur a effectivement fait défiler l'écran. Par conséquent, l'événement scrollend
se déclenche une fois le défilement terminé.
scrollSnapChanging
Cet événement se déclenche dès que le navigateur a déterminé que le geste de défilement aura ou entraînera une nouvelle cible d'ancrage. Il se déclenche hâtivement 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 ancré à l'objet événement en tant que snapTargetBlock
et snapTargetInline
. Si le conteneur de défilement est uniquement vertical, la propriété snapTargetInline
sera null
. La valeur de la propriété sera le nœud de l'élément.
Détails uniques pour dropSnapChangement
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 hâtivement lorsqu'un utilisateur fait défiler le contenu avec son doigt ou à l'aide d'un pavé tactile. Prenons l'exemple d'un utilisateur qui fait défiler lentement le contenu sans lever le doigt. scrollSnapChanging
se déclenchera plusieurs fois pendant le geste, à condition que l'utilisateur effectue un panoramique sur plusieurs cibles d'ancrage potentielles. Chaque fois que l'utilisateur fait défiler la page, si le navigateur détermine qu'il repose 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 d'ancrage en cours de route vers une nouvelle cible d'ancrage
Prenons l'exemple d'un glissement d'un geste vif, où l'utilisateur effectue un geste de défilement qui couvre plusieurs cibles d'ancrage à la fois. cet événement se déclenchera une fois avec la cible sur laquelle reposera. C'est donc impatient, mais pas gaspillage, de vous fournir la cible du Snap le plus vite possible.
Cas d'utilisation et exemples
Ces événements permettent de nombreux nouveaux cas d'utilisation tout en facilitant considérablement l'implémentation des modèles actuels. L'activation de l'animation déclenchée par snap est un excellent exemple. Révélant en contexte l'élément d'ancrage, ses enfants ou les informations associées lorsqu'il est la cible de l'ancrage.
Les modèles suivants illustrent quelques cas d'utilisation pour vous aider à être immédiatement productif.
Mettre en avant un témoignage
Cet exemple met en avant ou met en valeur visuellement le témoignage capturé.
scroller.onscrollsnapchange = event => {
scroller.querySelector(':scope .snapped')?.classList.remove('snapped')
event.snapTargetInline.classList.add('snapped')
}
<ph type="x-smartling-placeholder">Afficher la légende de l'élément ancré
Cet exemple montre la légende de l'élément ancré. Ces deux événements sont inclus dans cette démonstration, ce qui vous permet de voir les différences de délai et d'expérience utilisateur entre scrollSnapChange
et scrollSnapChanging
.
Modification de Snap
https://codepen.io/web-dot-dev/pen/wvLPPBL
Changement instantané
https://codepen.io/web-dot-dev/pen/QWXOObw
Animer une fois, les enfants d'une diapositive de présentation ancrée
Cet exemple sait quand une nouvelle diapositive a été posée et posée sur laquelle repose, ce qui est le moment idéal pour animer le contenu une fois.
document.addEventListener('scrollsnapchange', event => {
event.snapTargetBlock.classList.add('seen')
})
<ph type="x-smartling-placeholder">Ancrer à la fois sur x et sur y dans un conteneur de défilement
L'ancrage du défilement fonctionne pour les éléments de défilement qui permettent un défilement horizontal et vertical. Cette démonstration montre les cibles scrollSnapChanging
et scrollSnapChange
lorsque vous faites défiler la grille. Cette démonstration montre que l'élément auquel le navigateur s'applique n'est pas toujours celui auquel vous pensez qu'il s'agit.
Une grille de carrés est affichée dans un conteneur de défilement horizontal et vertical. La bordure en pointillés représente la cible "scrollSnapChangement", et la bordure continue correspond à la cible "scrollSnapChange". Le rouge représente l'élément "SnapTargetInline" et le bleu "SnapTargetBlock".
Deux pages de défilement associées
Cette démonstration comporte deux conteneurs d'ancrage défilant, l'un représentant une liste de haut niveau de liens et l'autre, le contenu paginé. Le nouvel événement scrollSnapChanging
permet d'associer facilement les états d'ancrage de manière bidirectionnelle afin qu'ils soient toujours synchronisés.
Sélecteur de couleur OKLCH
Cette démonstration comporte trois défilements, chacun représentant un canal de couleur différent dans OKLCH. L'élément ancré est synchronisé avec son groupe d'options approprié et les données peuvent être récupérées à partir d'un formulaire encapsulant les entrées. Si vous utilisez une souris ou un élément tactile, vous pouvez faire défiler l'écran jusqu'à la valeur souhaitée. Si vous utilisez un clavier, vous pouvez utiliser la touche de tabulation et les touches fléchées. Pour un lecteur d'écran, il ne s'agit que d'un formulaire.
défilementSnapChange permet de synchroniser hâtivement l'élément ancré avec l'état, tandis que défilementSnapChange 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/OJeOOVGDes hubs animés stupéfiants
Cette démonstration améliore progressivement l'expérience d'ancrage du défilement avec des transitions déclenchées par ancrage à l'aide de scrollsnapchange
.
Vérifiez la prise en charge des événements à l'aide du JavaScript suivant:
if ('onscrollsnapchange' in window) {
// ok to use snap change
}
<ph type="x-smartling-placeholder">Entrée de règle déroulante
Cette démonstration présente une règle déroulante comme autre moyen de choisir une longueur pour la saisie d'un nombre. Saisissez les valeurs directement dans le champ de saisie du nombre ou faites défiler la page jusqu'à la taille souhaitée. L'événement de modification permet d'effacer la sélection lors du geste de l'utilisateur, tandis que l'événement de modification permet de mettre à jour l'état et de renforcer le choix de l'utilisateur.
Couverture
Cette démonstration s'appuie sur l'excellente recréation d'animations basées sur le défilement par Brous Van Damme du célèbre flux de couverture de macOS (tutoriel vidéo). scrollSnapChanging
est utilisé de manière unique pour masquer le titre de l'album et scrollSnapChange
est utilisé pour présenter le titre. Les événements permettent d'organiser une cachette impatient de l'ancien titre et une présentation paresseuse du nouveau.
Autres idées pour stimuler la créativité
Maintenant qu'il est facile de savoir quel élément est sur le point d'être ancré et lequel l'est activement, de nombreuses nouvelles possibilités s'offrent à vous. Voici une liste d'idées pour stimuler la créativité, ainsi que d'autres cas d'utilisation:
- Déclenchement d'un chargement différé, également appelé "affichage déclenché par Snapchange" ou "Récupération de données".
- Vignettes de pellicule liées à une image plus grande.
- Lecture/Pause d'une bande-annonce vidéo pour une miniature de vidéo capturée
- Suivi Analytics
- Défilement
- Wheel of Fortune UI/UX
- La cible d'ancrage reçoit une info-bulle ancrée.
- Appuyer pour prendre la photo
- Ancrer pour afficher
- Sons sur Snap
- UI de balayage
- Onglets ou carrousels à faire glisser
Autres études
L'équipe Chrome est impatiente de découvrir ce que vous allez créer avec ces nouvelles API et espère qu'elle vous aidera à simplifier les expériences à faire défiler.