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, bevor Sie diese produktiv verwenden.

Das SnapEvent Interface definiert das Ereignisobjekt für die scrollsnapchanging und scrollsnapchange Ereignisse. Diese werden ausgelöst, wenn der Browser ermittelt, 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 geschnappt werden; SnapEvent stellt Referenzen zu dem in der Inline- und/oder Blockrichtung geschnappten Element bereit. Die auf SnapEvent verfügbaren Eigenschaftswerte entsprechen direkt dem Wert der scroll-snap-type CSS-Eigenschaft, die auf dem Scroll-Container gesetzt ist:

  • Wenn die Snap-Achse als block (oder ein physikalischer Achsenwert, der im aktuellen Schreibmodus block entspricht) angegeben ist, gibt nur snapTargetBlock eine Elementreferenz zurück.
  • Wenn die Snap-Achse als inline (oder ein physikalischer Achsenwert, der im aktuellen Schreibmodus inline entspricht) angegeben ist, gibt nur snapTargetInline eine Elementreferenz zurück.
  • Wenn die Snap-Achse als both angegeben ist, geben snapTargetBlock und snapTargetInline eine Elementreferenz zurück.
Event SnapEvent

Konstruktor

SnapEvent()

Erstellt eine neue SnapEvent Objektinstanz.

Instanzeigenschaften

Erbt Eigenschaften von seinem Elternteil, Event.

snapTargetBlock Nur lesbar

Gibt eine Referenz auf das Element zurück, das bei Auslösung des Ereignisses in Blockrichtung geschnappt wurde, oder null, wenn das Scroll-Snapping nur in der Inline-Richtung erfolgt, sodass kein Element in der Blockrichtung geschnappt wird.

snapTargetInline Nur lesbar

Gibt eine Referenz auf das Element zurück, das bei Auslösung des Ereignisses in der Inline-Richtung geschnappt wurde, oder null, wenn das Scroll-Snapping nur in der Blockrichtung erfolgt, sodass kein Element in der Inline-Richtung geschnappt wird.

Beispiele

scrollsnapchanging Beispiel

Im folgenden scrollsnapchanging Handler-Funktion Snippet setzen wir das class-Attribut des snapTargetBlock Elements auf pending unter Verwendung der Element.className Eigenschaft, das verwendet werden könnte, um das Element anders zu stylen, wenn es zum ausstehenden Snap-Ziel wird.

Beachten Sie, dass dieser Handler auf einem Blockrichtungs-Scroll-Container (vertikal scrollend, wenn die Seite auf einen horizontalen writing-mode gesetzt ist) gesetzt werden soll. Daher wird sich nur das snapTargetBlock Element zwischen mehreren ausgelösten Ereignissen ändern. SnapEvent.snapTargetInline wird null zurückgeben, da kein Snap in der Inline-Richtung 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-Funktion Snippet setzen wir eine selected Klasse auf das SnapEvent.snapTargetBlock Element, das verwendet werden könnte, um ein neu ausgewähltes Snap-Ziel so zu stylen, dass es aussieht, als wäre es ausgewählt worden (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

BCD tables only load in the browser

Siehe auch