Scroll-Snap-Ereignisse

Ab Chrome 129 können Sie die Ereignisse scrollSnapChange und scrollSnapChanging in JavaScript verwenden. Durch die Implementierung integrierter Snap-Ereignisse wird der zuvor unsichtbare Snap-Status zum richtigen Zeitpunkt und immer korrekt nutzbar. Diese Möglichkeit hatten Sie ohne diese Ereignisse nicht.

Vor scrollSnapChange konnten Sie mit einem Überschneidungsbeobachter herausfinden, welches Element den Scroll-Port kreuzt. Die Bestimmung, was angedockt wurde, war jedoch auf wenige Fälle beschränkt. Sie können beispielsweise erkennen, ob die Snap-Elemente den Scrollbereich füllen oder den Großteil des Scrollbereichs füllen. Dazu beobachten Sie sich überschneidende Elemente des Scrollbereichs und gehen davon aus, dass das Element, das den größten Teil des Scrollbereichs einnimmt, das Anlegeziel ist. Warten Sie dann auf scrollend und führen Sie eine Aktion für das angedockte Element (das Anlegeziel) aus.

Vor scrollSnapChanging war es jedoch nicht möglich, zu wissen, wann sich das Anlegeziel ändert oder in was es geändert wird (z. B. durch Wischen).

Diese neuen Ereignisse machen diese Informationen schnell und einfach verfügbar. Dadurch können Scroll-Snap-Interaktionen über ihre aktuellen Funktionen hinausgehen und die Abstimmung von Scroll-Snap-Beziehungen und neuen UI-Feedbackszenarien ermöglichen.

scrollSnapChange

Dieses Ereignis wird nur ausgelöst, wenn durch eine Wischgeste ein neues Anlegeziel erreicht wurde.

1. Nach dem Ausruhen des Scrollers.
2. Vor dem scrollend.

Dieses Ereignis wird kurz vor scrollend ausgelöst, wenn das Scrollen abgeschlossen ist, und nur, wenn ein neues Anlegeziel erreicht wurde. Dadurch wirkt das Ereignis verzögert oder just-in-time, wenn die Scrollgeste abgeschlossen ist.

scroller.addEventListener('scrollsnapchange', event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
})

scroller.onscrollsnapchange = event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
}

Das Ereignis gibt das angedockte Element im Ereignisobjekt als snapTargetBlock und snapTargetInline an. Wenn der Scroller nur horizontal ist, ist die Property snapTargetBlock null. Der Wert der Property ist der Elementknoten.

Eindeutige Details für scrollSnapChange

Wird erst ausgelöst, wenn der Nutzer die Geste beendet

Wenn ein Finger noch auf dem Display oder mehrere Finger auf einem Touchpad sind, ist das Scrollen des Nutzers noch nicht abgeschlossen. Das bedeutet, dass sich das Snap-Ziel noch nicht geändert hat und auf eine vollständige Nutzergeste gewartet wird.

Wird nicht ausgelöst, wenn sich das Snap-Ziel nicht geändert hat

Das Ereignis bezieht sich auf eine Änderung des Anlegepunkts. Wenn sich der Anlegepunkt nicht geändert hat, wird das Ereignis nicht ausgelöst, auch wenn der Nutzer mit dem Scroller interagiert hat. Der Nutzer hat jedoch tatsächlich gescrollt. Daher wird das Ereignis scrollend nach Abschluss des Scrollens weiterhin ausgelöst.

scrollSnapChanging

Dieses Ereignis wird ausgelöst, sobald der Browser festgestellt hat, dass die Scrollgeste zu einem neuen Anlegeziel geführt hat oder führen wird. Es wird zu oft und beim Scrollen ausgelöst.

scroller.addEventListener('scrollsnapchanging', event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
})

scroller.onscrollsnapchanging = event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
}

Das Ereignis gibt das angedockte Element im Ereignisobjekt als snapTargetBlock und snapTargetInline an. Wenn der Scroller nur vertikal ist, ist die Property snapTargetInline null. Der Wert der Property ist der Elementknoten.

Eindeutige Details für scrollSnapChanging

Wird früh und oft während einer Scrollgeste ausgelöst

Im Gegensatz zu scrollSnapChange, bei dem auf eine vollständige Scrollgeste des Nutzers gewartet wird, wird dieses Ereignis sofort ausgelöst, wenn ein Nutzer mit dem Finger oder einem Touchpad scrollt. Angenommen, ein Nutzer scrollt langsam, ohne den Finger vom Display zu heben. In diesem Fall wird scrollSnapChanging während der Geste mehrmals ausgelöst, solange der Nutzer über mehrere potenzielle Snap-Ziele schwebt. Jedes Mal, wenn der Nutzer scrollt, wird das Ereignis ausgelöst, wenn der Browser festgestellt hat, dass sich der Inhalt nach dem Loslassen an einem neuen Anlegeziel befindet.

Es werden nicht alle Snap-Ziele auf dem Weg zu einem neuen Snap-Ziel ausgelöst.

Angenommen, ein Nutzer führt eine Wischbewegung aus, die mehrere Snap-Ziele gleichzeitig umfasst. Dieses Ereignis wird einmal mit dem Ziel ausgelöst, das erreicht wird. Das Snap-Ziel wird also so schnell wie möglich bereitgestellt, ohne dass unnötige Daten übertragen werden.

Anwendungsfälle und Beispiele

Diese Ereignisse ermöglichen viele neue Anwendungsfälle und erleichtern gleichzeitig die Implementierung aktueller Muster. Ein gutes Beispiel ist die Aktivierung von Snap-Trigger-Animationen. Kontextbezogene Darstellung des Snap-Elements, der untergeordneten Elemente des Snap-Elements oder zugehöriger Informationen, wenn es sich um das Snap-Ziel handelt.

Die folgenden Muster veranschaulichen einige Anwendungsfälle, mit denen Sie sofort produktiv werden können.

Rezensionen hervorheben

In diesem Beispiel wird das aufgenommene Zitat beworben oder optisch hervorgehoben.

scroller.onscrollsnapchange = event => {
  scroller.querySelector(':scope .snapped')?.classList.remove('snapped')
  event.snapTargetInline.classList.add('snapped')
}

Untertitel für das aufgenommene Element anzeigen

In diesem Beispiel ist die Bildunterschrift für das angedockte Element zu sehen. Beide Ereignisse sind in dieser Demo enthalten, damit Sie die Unterschiede bei Zeitaufwand und Nutzerfreundlichkeit zwischen scrollSnapChange und scrollSnapChanging sehen können.

Die untergeordneten Elemente einer angedockten Präsentationsfolie einmal animieren

In diesem Beispiel wird erkannt, wenn eine neue Folie angezeigt wird und der Fokus darauf liegt. Das ist der ideale Zeitpunkt, um die Inhalte einmal zu animieren.

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

Andocken an X- und Y-Achsen in einem Scroller

Scroll-Snap funktioniert bei Scrollern, die horizontales und vertikales Scrollen ermöglichen. In dieser Demo werden sowohl scrollSnapChanging- als auch scrollSnapChange-Ziele angezeigt, während Sie durch das Raster scrollen. Diese Demo veranschaulicht, dass das Element, an das der Browser angedockt ist, möglicherweise nicht immer das ist, was Sie vermuten.

Zwei verknüpfte Bildlaufleisten

Diese Demo enthält zwei Container mit Scroll-Snapping, von denen einer eine Liste von Links auf oberster Ebene und der andere die eigentlichen paginarten Inhalte ist. Mit dem neuen Ereignis scrollSnapChanging können die Snap-Status dieser Elemente bidirektional verknüpft werden, sodass sie immer synchron sind.

OKLCH-Farbauswahl

Diese Demo enthält drei Schieberegler, die jeweils einen anderen Farbkanal in OKLCH darstellen. Das angedockte Element wird mit der entsprechenden Radiogruppe synchronisiert und die Daten können über ein Formular abgerufen werden, das die Eingaben umschließt. Nutzer mit Maus oder Touchscreen können zum gewünschten Wert scrollen. Nutzer mit Tastatur können die Tabulatortaste und die Pfeiltasten verwenden. Für einen Screenreader ist es nur ein Formular.

Animierte Hubs mit versetztem Snap

In dieser Demo wird das Scroll-Snapping durch Snap-ausgelöste Übergänge mit scrollsnapchange schrittweise verbessert.

Prüfe mit dem folgenden JavaScript, ob das Ereignis unterstützt wird:

if ('onscrollsnapchange' in window) {
  // ok to use snap change
}

Scrollbarer Lineal-Eingabebereich

In dieser Demo wird ein scrollbarer Maßstab als alternative Möglichkeit zur Auswahl einer Länge für eine numerische Eingabe verwendet. Geben Sie die Werte direkt in die Eingabefelder ein oder scrollen Sie zur Größe. Mit dem Ereignis „changing“ wird die Auswahl während der Geste des Nutzers gelöscht. Das Ereignis „change“ wird verwendet, um den Status zu aktualisieren und die Auswahl des Nutzers zu bestätigen.

Cover-Abfolge

Diese Demo basiert auf der hervorragenden scrollbaren Animation von Bramus Van Damme, die den berühmten macOS-Coverflow nachahmt (auch als Videoanleitung). Der Albumtitel wird mit scrollSnapChanging ausgeblendet und mit scrollSnapChange angezeigt. Mit den Ereignissen lässt sich das schnelle Ausblenden des alten Titels und die verzögerte Präsentation des neuen Titels steuern.

Weitere Ideen für mehr Kreativität

Da Sie jetzt ganz einfach sehen können, welches Element gerade angedockt wird und welches bereits angedockt ist, ergeben sich viele neue Möglichkeiten. Hier sind einige Ideen, die Sie inspirieren und zu weiteren Anwendungsfällen anregen können:

• Auslösen des Lazy-Loadings, auch als Snapchange-Triggered Rendering oder Data Fetching bezeichnet.
• Filmstreifen-Miniaturansichten, die mit einem größeren Bild verknüpft sind.
• Wiedergabe/Pause für einen Videotrailer für ein angedocktes Video-Thumbnail umschalten
• Analytics-Tracking
• Scrollytelling
• Wheel of Fortune UI/UX
• Das Snap-Ziel erhält eine angedockte Kurzinfo.
• Zum Anpinnen tippen
• Zum Aufdecken anklicken
• Ton bei Snaps
• Wisch-UI
• Wischbare Tabs oder Karussells

Weitere Studien

Das Chrome-Team freut sich darauf, zu sehen, was Sie mit diesen neuen APIs entwickeln, und hofft, dass sie Ihnen dabei helfen, die Scrollfunktion zu optimieren.

Ressourcen:

• CSS-Spezifikation
• Erläuterungen zum Scroll-Snap
• MDN-Snap-Ereignisse
• CodePen-Sammlung