Dokument: scrollsnapchanging 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 scrollsnapchanging Ereignis der Document Schnittstelle wird am Scroll-Container ausgelöst, wenn der Browser feststellt, dass ein neues Scroll-Snap-Ziel in der Warteschleife steht, d.h. es wird ausgewählt, wenn die aktuelle Scroll-Geste endet.

Dieses Ereignis funktioniert im Wesentlichen genauso wie das Element Schnittstellen-Erereignis scrollsnapchanging, außer 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 Ereignis-Handler-Eigenschaft.

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

onscrollsnapchanging = (event) => { }

Ereignistyp

Ein SnapEvent, das vom generischen Event Typ erbt.

Beispiele

Grundlegende Nutzung

Angenommen, wir haben ein <main> Element, das signifikanten Inhalt enthält, welcher das Scrollen verursacht:

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

Das <main> Element kann mit einer Kombination aus CSS-Eigenschaften in einen Scroll-Container umgewandelt werden, zum Beispiel:

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

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

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

Der folgende JavaScript-Schnipsel würde dazu führen, dass das scrollsnapchanging Ereignis im HTML-Dokument ausgelöst wird, wenn ein Kind des <main> Elements ein schwebendes Snap-Ziel wird. In der Handler-Funktion setzen wir eine pending Klasse auf das Kind, auf das die snapTargetBlock Eigenschaft verweist, die verwendet werden könnte, um es bei Auftreten des Ereignisses anders zu stylen.

js
document.addEventListener("scrollsnapchanging", (event) => {
  // remove previously-set "pending" classes
  const pendingElems = document.querySelectorAll(".pending");
  pendingElems.forEach((elem) => {
    elem.classList.remove("pending");
  });

  // Set current pending snap target class to "pending"
  event.snapTargetBlock.classList.add("pending");
});

Zu Beginn der Funktion wählen wir alle Elemente aus, die zuvor die pending Klasse angewendet hatten, und entfernen sie, sodass nur das aktuellste schwebende Snap-Ziel gestylt wird.

Spezifikationen

Specification
CSS Scroll Snap Module Level 2
# scrollsnapchanging

Browser-Kompatibilität

Siehe auch