Element: 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 Element-Schnittstelle wird am Scroll-Container am Ende eines Scroll-Vorgangs ausgelöst, wenn ein neues Scroll-Snap-Ziel ausgewählt wurde, kurz bevor das entsprechende scrollend-Ereignis ausgelöst wird.

Ein Scroll-Vorgang endet, wenn der Benutzer das Scrollen innerhalb eines Scroll-Containers beendet — zum Beispiel durch eine Berührungsgeste oder durch Ziehen mit dem Mauszeiger auf einer Bildlaufleiste — und die Geste loslässt.

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 von dem generischen Event-Typ erbt.

Beispiele

Grundlegende Verwendung

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

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

Das <main>-Element kann in einen Scroll-Container umgewandelt werden, der beim Scrollen zu seinen untergeordneten Elementen schnappt, indem eine Kombination von CSS scroll-snap-type-Eigenschaften und anderen Eigenschaften verwendet wird. Zum Beispiel:

css
main {
  width: 250px;
  height: 450px;
  overflow: scroll;
  scroll-snap-type: block mandatory;
}

Das folgende JavaScript-Beispiel sorgt dafür, dass das scrollsnapchange-Ereignis auf dem <main>-Element ausgelöst wird, wenn eines seiner Kinder zu einem neu ausgewählten Snap-Ziel wird. In der Handlerfunktion setzen wir eine selected-Klasse auf das Kind, das durch die SnapEvent.snapTargetBlock-Eigenschaft referenziert wird, die 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
const scrollingElem = document.querySelector("main");

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

Spezifikationen

Specification
CSS Scroll Snap Module Level 2
# scrollsnapchange

Browser-Kompatibilität

Siehe auch