Dokument: scrollsnapchange-Ereignis

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 des Document-Interfaces wird am Dokument-Scroll-Container ausgelöst, wenn am Ende eines Scrollvorgangs ein neues Scroll-Snap-Ziel ausgewählt wird.

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

Syntax

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

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

onscrollsnapchange = (event) => { }

Ereignistyp

Ein SnapEvent, das vom generischen Event-Typ erbt.

Beispiele

Grundlegende Verwendung

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

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

Das <main>-Element kann mit 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 ein Scroll-Snap-Verhalten auf dem scrollenden Inhalt implementieren, indem wir die scroll-snap-type-Eigenschaft auf dem <html>-Element angeben:

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

Das folgende JavaScript-Beispiel würde das scrollsnapchange-Ereignis auf dem HTML-Dokument auslösen, wenn ein Kind des <main>-Elements zu einem neu ausgewählten Snap-Ziel wird. In der Handlerfunktion setzen wir eine selected-Klasse auf das Kind, auf das durch SnapEvent.snapTargetBlock verwiesen wird. Diese kann verwendet werden, um es so zu stylen, dass es aussieht, als wäre es ausgewählt worden (zum Beispiel mit einer Animation), wenn das Ereignis ausgelöst wird.

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

Spezifikationen

Specification
CSS Scroll Snap Module Level 2
# scrollsnapchange

Browser-Kompatibilität

Siehe auch