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.
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
blockangegeben ist (oder ein physikalischer Achsenwert, der in der aktuellen Schreibweiseblockentspricht), gibt nursnapTargetBlockeinen Elementverweis zurück. - Wenn die Snap-Achse als
inlineangegeben ist (oder ein physikalischer Achsenwert, der in der aktuellen Schreibweiseinlineentspricht), gibt nursnapTargetInlineeinen Elementverweis zurück. - Wenn die Snap-Achse als
bothangegeben ist, gebensnapTargetBlockundsnapTargetInlineeinen Elementverweis zurück.
Konstruktor
SnapEvent()Experimentell-
Erstellt eine neue
SnapEvent-Objektinstanz.
Instanz-Eigenschaften
Erbt Eigenschaften von seinem Elternteil, Event.
snapTargetBlockSchreibgeschützt Experimentell-
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. snapTargetInlineSchreibgeschützt Experimentell-
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
| Specification |
|---|
| CSS Scroll Snap Module Level 2 # snapevent-interface |
Browser-Kompatibilität
Siehe auch
scrollsnapchangingEreignisscrollsnapchangeEreignis- CSS Scroll Snap Modul
- Verwendung von Scroll-Snap-Ereignissen
- Scroll Snap Events auf developer.chrome.com (2024)