Merci d'avoir participé à Google I/O ! Regarder des contenus à la demande

Cette page a été traduite par l'API Cloud Translation.

Faire défiler les événements d'ancrage

Adam Argyle

À 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.

Navigateurs pris en charge

Source

Navigateurs pris en charge

Source

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 la majeure partie de celui-ci. 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 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. À 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 ! Avec ces nouveaux événements, vous pouvez accéder rapidement et facilement à ces informations. 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 scénarios de commentaires 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 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 alors 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.

Détails uniques pour dropSnapChange

Ne se déclenche pas tant que l'utilisateur n'a pas libéré son geste

Si un doigt est toujours 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 la barre de défilement. 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 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 é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. 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 a déterminé qu'il se trouverait sur une nouvelle cible d'ancrage à la fin du défilement, 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

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 nombreux nouveaux cas d'utilisation tout en facilitant considérablement l'implémentation des modèles actuels. 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')
}

https://codepen.io/web-dot-dev/pen/dyBZZPe

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.

Accroche Changement
https://codepen.io/web-dot-dev/pen/wvLPPBL

Changez en un clin d'œil
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, ce qui est le moment idéal pour animer le contenu une fois.

document.addEventListener('scrollsnapchange', event => {
  event.snapTargetBlock.classList.add('seen')
})

https://codepen.io/web-dot-dev/pen/rNEYYVj

Ancrer à la fois sur x et sur y dans un conteneur 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 montre à 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'applique n'est pas toujours celui auquel vous pensez qu'il s'agit.

Une grille de carrés dans un défilement horizontal et vertical est affichée. 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.

https://codepen.io/web-dot-dev/pen/qBzVVdp

Deux pages 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.

https://codepen.io/web-dot-dev/pen/YzoEEXj

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 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. 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.

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/OJeOOVG

Ancrage 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
}

https://codepen.io/web-dot-dev/pen/MWMOOae

Saisie de règle à faire défiler

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.

https://codepen.io/web-dot-dev/pen/LYKOOpd

Flux de couverture

Cette démonstration s'appuie sur l'excellente recréation d'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 tardive du nouveau.

https://codepen.io/web-dot-dev/pen/Bagmmog

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 stimuler la créativité, ainsi que 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
Ancrer 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'elle vous aidera à simplifier les expériences à faire défiler.