Scroll-Snap-Ereignisse

Ab Chrome 129 können Sie die Ereignisse scrollSnapChange und scrollSnapChanging aus JavaScript verwenden. Durch die Implementierung von integrierten Snap-Events wird der bisher unsichtbare Snap-Status zum richtigen Zeitpunkt und immer korrekt. Das ist keine Bequemlichkeit, die Sie ohne diese Veranstaltungen hatten.

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 Scroll-Port ausfüllen oder den Großteil des Scroll-Ports ausfüllen. Dazu beobachten Sie sich überschneidende Elemente des Bildlaufbereichs. Je nachdem, welches Element den Großteil des Scrollbereichs einnimmt, nehmen Sie an, dass es sich um das Andockziel handelt. Warten Sie dann auf scrollend und reagieren Sie auf das andockte Element (das Andockziel).

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

Tolle Neuigkeiten – diese neuen Ereignisse machen diese Informationen schnell und einfach verfügbar. Dadurch werden Scroll-Snap-Interaktionen ermöglicht, die über ihre aktuellen Möglichkeiten hinausgehen, und ermöglicht die Orchestrierung von Scroll-Snap-Beziehungen und neuer UI-Feedback-Szenarien.

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

scrollSnapChange

Dieses Ereignis wird nur ausgelöst, wenn eine Scroll-Geste dazu geführt hat, dass ein neues Ausrichtungsziel aufgestellt wurde, und zwar in der folgenden Reihenfolge

1. Nach Ende 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 fühlt sich das Ereignis faul oder genau zum richtigen Zeitpunkt an, wenn die Scroll-Geste 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);
}

Durch das Ereignis wird das angehaltene Element im Ereignisobjekt als snapTargetBlock und snapTargetInline angezeigt. 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 seine Geste loslässt

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 dient einer Änderung des Andockens. Wenn sich das Andockziel nicht geändert hat, wird das Ereignis auch dann nicht ausgelöst, wenn ein Nutzer mit dem Scroller interagiert hat. Da der Nutzer aber tatsächlich gescrollt hat, wird nach Abschluss des Scrollens immer noch das scrollend-Ereignis ausgelöst.

scrollSnapChanging

Dieses Ereignis wird ausgelöst, sobald der Browser entschieden hat, dass die Scroll-Geste ein neues Andockziel aufweist oder zu einem neuen Ausrichtungsziel führt. 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);
}

Durch das Ereignis wird das angehaltene Element im Ereignisobjekt als snapTargetBlock und snapTargetInline angezeigt. Ist der Scroller nur vertikal, hat das Attribut snapTargetInline den Wert null. Der Wert der Eigenschaft ist der Elementknoten.

Besondere Details für scrollSnapÄndern

Wird frühzeitig und häufig beim Scrollen ausgelöst

Im Gegensatz zu „scrollSnapChange“, bei dem auf eine vollständige Scroll-Geste des Nutzers gewartet wird, wird dieses Ereignis sofort ausgelöst, wenn der Nutzer mit dem Finger scrollt oder ein Touchpad verwendet. Nehmen wir als Beispiel einen Nutzer, der langsam scrollt, ohne einen Finger zu rühren. scrollSnapChanging wird während einer Geste mehrmals ausgelöst, solange der Nutzer über mehrere mögliche Targeting-Ziele schwenkt. Wenn der Browser jedes Mal einen Bildlauf durchführt und der Browser feststellt, dass er nach Loslassen auf einem neuen Ziel Andocken liegen würde, wird das Ereignis ausgelöst und teilt Ihnen mit, um welches Element es sich handelt.

Es werden nicht alle Ausrichtungsziele auf dem Weg zu einem neuen Ausrichtungsziel ausgelöst

Stellen Sie sich zudem einen Fling vor, bei dem ein Nutzer eine Scroll-Wurf-Geste ausführt, die sich über mehrere Ausrichtungsziele gleichzeitig erstreckt. wird dieses Ereignis einmal bei dem Ziel ausgelöst, auf dem der Ruhezustand basiert. Es ist also eifrig, aber nicht verschwendet, denn es liefert Ihnen so schnell wie möglich das Ziel.

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 der Funktion Durch Snap ausgelöste Animation. Kontextabhängiges Anzeigen des Snap-Elements, seiner untergeordneten Elemente oder zugehöriger Informationen, wenn es sich um das Andocken-Ziel handelt.

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

Eine Beschreibung hervorheben

In diesem Beispiel wird das kurze Erfahrungsbericht hervorgehoben oder visuell hervorgehoben.

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

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

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

Untertitel für das angedockte Element anzeigen

In diesem Beispiel sehen Sie die Bildunterschrift für das ausgewählte Element. Beide Ereignisse sind in dieser Demo enthalten, sodass du die Unterschiede beim Timing und bei der Nutzererfahrung zwischen scrollSnapChange und scrollSnapChanging siehst.

In einer Animation werden die untergeordneten Elemente der Präsentationsfolie

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')
})

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

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

Andocken an X und Y in einem Scroller

Scroll-Snap funktioniert bei Scrollern, bei denen horizontales und vertikales Scrollen möglich sind. In dieser Demo sehen Sie sowohl scrollSnapChanging- als auch scrollSnapChange-Ziele, während Sie im Raster scrollen. Diese Demo zeigt, dass das Element, an das der Browser fliegt, möglicherweise nicht immer das ist, an das Sie glauben.

Zwei verknüpfte Scroller

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.

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

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

OKLCH-Farbauswahl

Diese Demo enthält drei Bildlaufleisten, die jeweils einen anderen Farbkanal in OKLCH darstellen. Das ausgerichtete Element wird mit seiner entsprechenden Optionsfeldgruppe synchronisiert und die Daten können aus einem Formular abgerufen werden, das die Eingaben umschließt. Für Maus- oder Touch-Nutzer können Sie zum gewünschten Wert scrollen. Für Tastaturnutzer können Sie die Tabulatortaste verwenden und die Pfeiltasten verwenden. Bei einem Screenreader ist es einfach ein Formular.

Atemberaubende animierte Hubs

In dieser Demo wird das Andocken beim Scrollen durch das Andocken von Übergängen 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
}

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

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

Scrollbare Linealeingabe

Diese Demo zeigt ein scrollbares Lineal als alternative Möglichkeit, eine Länge für eine Zahleneingabe auszuwählen. Geben Sie die Werte direkt in die Zahleneingabe ein oder scrollen Sie zur Größe. Mit dem Änderungsereignis wird die Auswahl während einer Nutzergeste gelöscht, während das Änderungsereignis dazu dient, den Status zu aktualisieren und die Auswahl des Nutzers zu verstärken.

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

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

Ablauf der Abdeckung

Diese Demo baut auf der exzellenten Scroll-Animations Nachbildung von Brumus Van Damme des berühmten macOS-Coverflows auf (Videoanleitung). scrollSnapChanging wird verwendet, um den Albumtitel auszublenden, und scrollSnapChange, um den Titel einzublenden. Die Ereignisse helfen dabei, den alten Titel eifrig zu verstecken und den neuen Titel faszinierend vorzustellen.

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

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

Mehr Ideen für mehr Kreativität

Jetzt, da es trivial ist, zu wissen, welches Element aktiv ausgerichtet werden soll, bieten sich viele neue Möglichkeiten. Hier ist eine Liste mit Ideen, die zur Förderung der Kreativität beitragen und weitere Anwendungsfälle unterstützen:

• Auslösendes Lazy Loading, das als Snapchange-gesteuertes Rendering oder Datenabruf bezeichnet wird.
• Miniaturansichten von Filmstreifen, die mit einem größeren Bild verknüpft sind
• Wechsel zwischen Wiedergabe und Pause für einen Videotrailer, um ein aufgenommenes Video-Thumbnail zu erstellen.
• Analytics-Tracking
• Scrollen
• Wheel of Fortune-UI/UX
• Das Andockziel erhält eine verankerte Kurzinfo.
• Zum Andocken tippen
• Zum Anzeigen andocken
• Ton beim Andocken
• Wisch-Benutzeroberfläche
• 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:

• Preisvergleichsportal-Spezifikationen
• Erklärungen zu Scroll-Snap
• CodePen-Sammlung