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).
Ein horizontaler Scroller mit nummerierten Feldern im Inneren als Andockziele. Auf der linken Seite sehen Sie ein Echtzeit-Protokoll der scrollSnapChange-Ereignisse, in der SnapTargetInline blau hervorgehoben ist. Auf der rechten Seite sehen Sie ein Echtzeit-Protokoll der scrollSnapChange-Ereignisse. Das SnapTargetInline wird dabei grau hervorgehoben.
Jetzt ausprobieren
https://codepen.io/web-dot-dev/pen/jOjaaEP
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
- Nach Ende des Scrollens.
- 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">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.
Andocken verändern
https://codepen.io/web-dot-dev/pen/wvLPPBL
Änderung übernehmen
https://codepen.io/web-dot-dev/pen/QWXOObw
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">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.
Ein Raster aus Quadraten in einem horizontalen und vertikalen Scroller ist zu sehen. Der gestrichelte Rahmen stellt das scrollSnapChange-Ziel dar und der durchgängige Rahmen ist das ScrollSnapChange-Ziel. Rot steht für „snapTargetInline“ und Blau für „snapTargetBlock“.
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.
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.
Mit scrollSnapChange wird das angedockte Element mit dem Status synchronisiert, während scrollSnapChange dazu verwendet wird, den betroffenen Farbkanal-Header zu animieren, auf den die Nutzereingabe angewendet wurde.
https://codepen.io/web-dot-dev/pen/OJeOOVGAtemberaubende 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">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">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.
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.