SnapEvent

Die SnapEvent-Schnittstelle definiert das Ereignisobjekt für die scrollsnapchanging und scrollsnapchange Ereignisse. Diese werden jeweils auf einem Scroll-Container ausgelöst, wenn der Browser feststellt, dass ein neues Scroll-Snap-Ziel ansteht (ausgewählt wird, wenn die aktuelle Scroll-Geste endet), und wenn ein neues Snap-Ziel ausgewählt wird.

Diese Ereignisse können verwendet werden, um Code auszuführen als Reaktion auf neue Elemente, die gesnappt werden; SnapEvent stellt Verweise auf das Element bereit, das in Inline- und/oder Block-Richtung gesnappt wurde. Die auf SnapEvent verfügbaren Eigenschaftswerte entsprechen direkt dem Wert der CSS-Eigenschaft scroll-snap-type, die auf den Scroll-Container gesetzt ist:

• Wenn die Snap-Achse als block angegeben ist (oder ein physikalischer Achsenwert, der in der aktuellen Schreibweise block entspricht), gibt nur snapTargetBlock einen Elementverweis zurück.
• Wenn die Snap-Achse als inline angegeben ist (oder ein physikalischer Achsenwert, der in der aktuellen Schreibweise inline entspricht), gibt nur snapTargetInline einen Elementverweis zurück.
• Wenn die Snap-Achse als both angegeben ist, geben snapTargetBlock und snapTargetInline einen Elementverweis zurück.

Konstruktor

SnapEvent()

Erstellt eine neue SnapEvent-Objektinstanz.

Instanz-Eigenschaften

Erbt Eigenschaften von seinem Elternteil, Event.

snapTargetBlock Schreibgeschützt

Gibt einen Verweis auf das Element zurück, das in der Blockrichtung gesnappt wurde, als das Ereignis ausgelöst wurde, oder null, wenn das Scroll-Snapping nur in der Inline-Richtung erfolgt und daher kein Element in der Blockrichtung gesnappt wird.

snapTargetInline Schreibgeschützt

Gibt einen Verweis auf das Element zurück, das in der Inline-Richtung gesnappt wurde, als das Ereignis ausgelöst wurde, oder null, wenn das Scroll-Snapping nur in der Blockrichtung erfolgt und daher kein Element in der Inline-Richtung gesnappt wird.

Beispiele

Beispiel für scrollsnapchanging

Im folgenden scrollsnapchanging-Handler-Funktionsschnipsel setzen wir das class-Attribut des snapTargetBlock-Elements auf pending mithilfe der Element.className-Eigenschaft. Dies könnte verwendet werden, um das Element anders zu stylen, wenn es ein ausstehendes Snap-Ziel wird.

Beachten Sie, dass dieser Handler für einen Scroll-Container in der Blockrichtung (vertikales Scrollen, wenn die Seite auf eine horizontale Schreibweise gesetzt ist) gedacht ist. Daher wird sich nur das snapTargetBlock-Element zwischen mehreren auslösenden Ereignissen ändern. SnapEvent.snapTargetInline wird null zurückgeben, da kein Snapping in der Inline-Richtung erfolgt.

scrollingElem.addEventListener("scrollsnapchanging", (event) => {
 // Set current pending snap target class to "pending"
 event.snapTargetBlock.className = "pending";
 // Logs the new pending block-direction snap target element
 console.log(event.snapTargetBlock);
 // Logs null; no inline snapping occurs
 console.log(event.snapTargetInline);
});

Beispiel für scrollsnapchange

Im folgenden scrollsnapchange-Handler-Funktionsschnipsel setzen wir eine selected-Klasse auf das SnapEvent.snapTargetBlock-Element. Dies könnte verwendet werden, um ein neu ausgewähltes Snap-Ziel so zu stylen, dass es wie ausgewählt aussieht (zum Beispiel mit einer Animation).

scrollingElem.addEventListener("scrollsnapchange", (event) => {
 event.snapTargetBlock.className = "selected";
});

Spezifikationen

Browser-Kompatibilität

Siehe auch

• scrollsnapchanging Ereignis
• scrollsnapchange Ereignis
• CSS Scroll Snap Modul
• Verwendung von Scroll-Snap-Ereignissen
• Scroll Snap Events auf developer.chrome.com (2024)