Element: scrollsnapchanging 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, bevor Sie diese produktiv verwenden.

Das scrollsnapchanging Ereignis der Element Schnittstelle wird auf dem Scroll-Container ausgelöst, wenn der Browser feststellt, dass ein neues Scroll-Snap-Ziel ansteht, d.h. es wird ausgewählt, wenn die aktuelle Scroll-Geste endet.

Insbesondere wird dieses Ereignis während einer Scroll-Geste ausgelöst, jedes Mal, wenn der Benutzer über potenzielle neue Snap-Ziele bewegt. Zum Beispiel könnte der Benutzer langsam scrollen, indem er seinen Finger auf einem Touchscreen-Gerät bewegt, oder die Maustaste auf einer Scroll-Leiste gedrückt hält und die Maus bewegt. scrollsnapchanging kann daher mehrmals für jede Scroll-Geste ausgelöst werden.

Es wird jedoch nicht bei allen potenziellen Snap-Zielen für eine Scroll-Geste ausgelöst, die über mehrere Snap-Ziele bewegt. Vielmehr wird es nur für das letzte Ziel ausgelöst, auf dem das Snapping potenziell ruhen wird.

Syntax

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

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

onscrollsnapchanging = (event) => {};

Ereignistyp

Ein SnapEvent, welches von dem generischen Event Typ erbt.

Beispiele

Grundlegende Nutzung

Angenommen, wir haben ein <main>-Element, das erheblichen Inhalt enthält, wodurch es scrollt:

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

Das <main>-Element kann in einen Scroll-Container verwandelt werden, der zu seinen Kindern schnellt, wenn gescrollt wird, indem eine Kombination der CSS scroll-snap-type Eigenschaft und andere Eigenschaften verwendet werden. Zum Beispiel:

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

Das folgende JavaScript-Beispiel würde das scrollsnapchanging Ereignis auf dem <main>-Element auslösen, wenn eines seiner Kinder ein anstehendes 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 anders zu stylen, wenn das Ereignis ausgelöst wird.

js
scrollingElem.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, auf die zuvor die pending-Klasse angewendet wurde, und entfernen diese, sodass nur das zuletzt anstehende 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