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

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

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 :

1. Une fois que le parchemin est resté en marche.
2. 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">

</ph> .

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.

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

</ph> .

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.

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.

<ph type="x-smartling-placeholder"> <ph type="x-smartling-placeholder">

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.

Des 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">

</ph> .

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.

<ph type="x-smartling-placeholder"> <ph type="x-smartling-placeholder">

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.

<ph type="x-smartling-placeholder"> <ph type="x-smartling-placeholder">

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.

Ressources :

• Spécifications CSS
• Faire défiler les documents explicatifs sur Snap
• Collection CodePen