SnapEvent

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Das SnapEvent Interface 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 Ziel für das Scroll-Snapping 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 geschnappt werden; SnapEvent bietet Referenzen auf das Element, das in der Inline- und/oder Blockrichtung geschnappt wird. Die auf SnapEvent verfügbaren Eigenschaftswerte entsprechen direkt dem Wert der scroll-snap-type CSS-Eigenschaft, die auf den Scroll-Container festgelegt ist:

  • Wenn die Snap-Achse als block spezifiziert ist (oder ein physischer Achsenwert, der im aktuellen Schreibmodus block entspricht), liefert nur snapTargetBlock eine Elementreferenz.
  • Wenn die Snap-Achse als inline spezifiziert ist (oder ein physischer Achsenwert, der im aktuellen Schreibmodus inline entspricht), liefert nur snapTargetInline eine Elementreferenz.
  • Wenn die Snap-Achse als both spezifiziert ist, liefern snapTargetBlock und snapTargetInline beide eine Elementreferenz.
Event SnapEvent

Konstruktor

SnapEvent()

Erstellt eine neue Instanz eines SnapEvent-Objekts.

Instanz-Eigenschaften

Erbt Eigenschaften von seinem Elternteil, Event.

snapTargetBlock Schreibgeschützt

Gibt eine Referenz auf das Element zurück, das in der Blockrichtung geschnappt 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 geschnappt wird.

snapTargetInline Schreibgeschützt

Gibt eine Referenz auf das Element zurück, das in der Inline-Richtung geschnappt 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 geschnappt wird.

Beispiele

scrollsnapchanging Beispiel

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

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

js
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);
});

scrollsnapchange Beispiel

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

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

Spezifikationen

Specification
CSS Scroll Snap Module Level 2
# snapevent-interface

Browser-Kompatibilität

Siehe auch