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 des Document Interfaces wird auf dem Scroll-Container ausgelöst, wenn der Browser ein neues Scroll-Snap-Ziel als ausstehend bestimmt, d. h. es wird ausgewählt, wenn die aktuelle Scroll-Geste endet.

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

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 umfangreiche Inhalte enthält, die es zum Scrollen bringen:

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 das Scroll-Snap-Verhalten auf den scrollenden Inhalt implementieren, indem wir die scroll-snap-type Eigenschaft auf das <html> Element spezifizieren:

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

Das folgende JavaScript-Snippet würde dazu führen, dass das scrollsnapchanging-Ereignis auf dem HTML-Dokument ausgelöst wird, wenn ein Kind des <main> Elements ein ausstehendes Snap-Ziel wird. In der Handler-Funktion setzen wir eine pending Klasse auf das Kind, auf das durch die snapTargetBlock Eigenschaft verwiesen wird, die verwendet werden könnte, um es unterschiedlich zu stylen, wenn das Ereignis ausgelöst wird.

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 diese, sodass nur das aktuellste ausstehende Snap-Ziel gestylt wird.

Spezifikationen

Specification
CSS Scroll Snap Module Level 2
# scrollsnapchanging

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch