Window: scrollsnapchange Event

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 scrollsnapchange-Ereignis der Window-Schnittstelle wird am Ende eines Scroll-Vorgangs auf dem window ausgelöst, wenn ein neues Scroll-Snap-Ziel ausgewählt wird.

Dieses Ereignis funktioniert ähnlich wie das Element-Schnittstellenereignis scrollsnapchange, mit dem Unterschied, dass das gesamte HTML-Dokument als Scroll-Snap-Container festgelegt werden muss (d.h. scroll-snap-type ist auf dem <html>-Element gesetzt).

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Event-Handler-Eigenschaft.

js
addEventListener("scrollsnapchange", (event) => { })

onscrollsnapchange = (event) => { }

Ereignistyp

Ein SnapEvent, das vom generischen Event-Typ erbt.

Beispiele

Grundlegende Nutzung

Angenommen, wir haben ein <main>-Element, das signifikanten Inhalt enthält, der zum Scrollen führt:

html
<main>
  <!-- Significant content -->
</main>

Das <main>-Element kann mithilfe einer Kombination von CSS-Eigenschaften in einen Scroll-Container verwandelt werden, zum Beispiel:

css
main {
  width: 250px;
  height: 450px;
  overflow: scroll;
}

Wir können dann das Scroll-Snapping-Verhalten auf den scrollenden Inhalt umsetzen, indem wir die Eigenschaft scroll-snap-type auf dem <html>-Element spezifizieren:

css
html {
  scroll-snap-type: block mandatory;
}

Das folgende JavaScript-Fragment würde das scrollsnapchange-Ereignis auf dem HTML-Dokument auslösen, wenn ein Kind des <main>-Elements ein neu gewähltes Snap-Ziel wird. In der Handler-Funktion setzen wir eine selected-Klasse auf das Kind, das durch das SnapEvent.snapTargetBlock referenziert wird, die beispielsweise verwendet werden könnte, um es so zu stylen, dass es wie ausgewählt aussieht (zum Beispiel mit einer Animation), wenn das Ereignis ausgelöst wird.

js
window.addEventListener("scrollsnapchange", (event) => {
  event.snapTargetBlock.classList.add("selected");
});

Spezifikationen

Specification
CSS Scroll Snap Module Level 2
# scrollsnapchange

Browser-Kompatibilität

Siehe auch