Element: 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 Element Schnittstelle wird im Scroll-Container ausgelöst, wenn der Browser feststellt, dass ein neues Ziel für das Scroll-Snap ansteht, d.h. es wird ausgewählt, wenn die aktuelle Scrollgeste endet.

Dieses Ereignis wird spezifisch während einer Scrollgeste 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 Bildlaufleiste gedrückt hält und die Maus bewegt. scrollsnapchanging kann daher mehrmals für jede Scrollgeste ausgelöst werden.

Es wird jedoch nicht für alle potenziellen Snap-Ziele einer Scrollgeste ausgelöst, die über mehrere Snap-Ziele hinweg bewegt wird. Vielmehr wird es nur für das letzte Ziel ausgelöst, auf dem das Snap möglicherweise verbleibt.

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 Verwendung

Angenommen, wir haben ein <main> Element mit erheblichem Inhalt, der zum Scrollen führt:

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

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

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

Das folgende JavaScript-Snippet würde das scrollsnapchanging Ereignis beim <main> Element auslösen, wenn eines seiner Kinder ein ausstehendes Snap-Ziel wird. In der Handler-Funktion setzen wir eine pending Klasse auf das durch die snapTargetBlock Eigenschaft referenzierte Kind, 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, die zuvor die pending Klasse angewendet hatten und entfernen diese, sodass nur das neueste ausstehende Snap-Ziel gestylt wird.

Spezifikationen

Specification
CSS Scroll Snap Module Level 2
# scrollsnapchanging

Browser-Kompatibilität

Siehe auch