Scroll-Snap-Ereignisse

Adam Argyle
Adam Argyle
X GitHub

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.

Unterstützte Browser

  • Chrome: 129.
  • Edge: 129.
  • Firefox: nicht unterstützt
  • Safari: Nicht unterstützt.

Quelle

Unterstützte Browser

  • Chrome: 129.
  • Edge: 129.
  • Firefox: Nicht unterstützt.
  • Safari: wird nicht unterstützt.

Quelle

Vor scrollSnapChange konnten Sie einen Überschneidungsbeobachter verwenden, um herauszufinden, welches Element den Scrollport überquerte. Allerdings war die Bestimmung des Andockens auf einige Bedingungen 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 sichschneidende 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 dem scrollSnapChanging war es jedoch unmöglich, zu wissen, wann sich das Andockziel ändert oder in was es geändert wird (z. B. durch Scrollen).

Ein horizontaler Bildlauf mit nummerierten Feldern als Snap-Ziele. Links sehen Sie ein Echtzeitprotokoll der scrollSnapChange-Ereignisse, in dem das snapTargetInline blau hervorgehoben ist. Rechts sehen Sie ein Echtzeitprotokoll der scrollSnapChanging-Ereignisse, in dem das snapTargetInline grau hervorgehoben ist.

Jetzt ausprobieren
https://codepen.io/web-dot-dev/pen/jOjaaEP

Tolle Neuigkeiten – 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 einer Pause des Scrollens.
  2. Vor dem scrollend.

Dieses Ereignis wird kurz vor scrollend ausgelöst, wenn das Scrollen abgeschlossen ist und nur, wenn ein neues Ausrichtungsziel aufgesetzt 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 Eigenschaft snapTargetBlock auf null gesetzt. Der Wert der Eigenschaft ist der Elementknoten.

Eindeutige Details für scrollSnapChange

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

Ein Finger auf dem Bildschirm oder die Finger auf einem Touchpad zeigen an, dass die Geste des Nutzers noch nicht vollständig gescrollt wurde. Das bedeutet, dass das Scrollen noch nicht beendet ist, d. h., das Ausrichtungsziel hat sich noch nicht geändert und eine vollständige Nutzergeste steht noch aus.

Wird nicht ausgelöst, wenn sich das Ausrichtungsziel 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. Da der Nutzer aber tatsächlich gescrollt hat, wird nach Abschluss des Scrollens weiterhin das scrollend-Ereignis 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. Das Display wird eifrig und auch 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.

Einzigartige Details für scrollSnapChanging

Wird frühzeitig und häufig beim Scrollen 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')
}
https://codepen.io/web-dot-dev/pen/dyBZZPe

Untertitel für das angedockte 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.

Snap Changing
https://codepen.io/web-dot-dev/pen/wvLPPBL

Snap Change
https://codepen.io/web-dot-dev/pen/QWXOObw

Die untergeordneten Elemente einer angedockten Präsentationsfolie einmal animieren

In diesem Beispiel wird erkannt, wann eine neue Folie gelandet ist. Dies ist ein guter Zeitpunkt, um den Inhalt einmal zu animieren.

document.addEventListener('scrollsnapchange', event => {
  event.snapTargetBlock.classList.add('seen')
})
https://codepen.io/web-dot-dev/pen/rNEYYVj

Andocken an X und Y in einem Scroller

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

Ein Raster aus Quadraten in einem horizontalen und vertikalen Scroller wird angezeigt. Der gestrichelte Rahmen steht für das Ziel „scrollSnapChanging“ und der durchgezogene Rahmen für das Ziel „scrollSnapChange“. Rot steht für „snapTargetInline“ und blau für „snapTargetBlock“.

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

Zwei verknüpfte Bildlaufleisten

Diese Demo enthält zwei Container mit Scroll-Snap. Einer ist eine allgemeine Liste von Links und der andere ist der Inhalt der Seiteninhalte. Mit dem neuen scrollSnapChanging-Ereignis ist es einfach, die Andockstatus dieser bidirektionalen Verbindungen zu verknüpfen, damit sie immer synchron sind.

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

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. Für Maus- oder Touch-Nutzer können Sie 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.

Mit scrollSnapChanging wird das angedockte Element sofort mit dem Status synchronisiert. Mit scrollSnapChange wird der betroffene Farbkanalheader animiert, auf den die Nutzereingabe angewendet wurde.

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

Animierte Hubs mit versetztem Snap

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

Prüfen Sie mit dem folgenden JavaScript-Code, ob Ereignisse unterstützt werden:

if ('onscrollsnapchange' in window) {
  // ok to use snap change
}
https://codepen.io/web-dot-dev/pen/MWMOOae

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.

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

Ablauf der Abdeckung

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.

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

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, eröffnen 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
  • Glücksrad – UI/UX
  • Das Andockziel erhält eine verankerte Kurzinfo.
  • Zum Andocken tippen
  • Zum Aufdecken anklicken
  • Ton bei Snaps
  • Wisch-UI
  • Wischbare Tabs oder Karussells

Weitere Studien

Das Chrome-Team freut sich darauf, zu hören, was Sie mit diesen neuen APIs entwickeln, und hofft, dass Sie damit Ihre scrollbaren Apps optimieren können.

Ressourcen: