Dasscrollsnapchanging Ereignis derElement Schnittstelle wird auf demScroll-Container ausgelöst, wenn der Browser feststellt, dass ein neues Scroll-Snap-Ziel aussteht, d.h. es wird gewählt, wenn die aktuelle Scroll-Geste endet.

Speziell löst dieses Ereignis während einer Scroll-Geste aus, jedes Mal, wenn der Benutzer über potenzielle neue Snap-Ziele fährt. Zum Beispiel könnte der Benutzer langsam scrollen, indem er den Finger auf einem Touchscreen-Gerät zieht, 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 für alle potenziellen Snap-Ziele ausgelöst, wenn eine Scroll-Geste über mehrere Snap-Ziele fährt. Vielmehr wird es nur für das letzte Ziel ausgelöst, auf dem das Snapping potenziell ruht.

Syntax

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

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

Ereignistyp

EinSnapEvent, der vom generischenEvent Typ erbt.

Beispiele

Grundlegende Verwendung

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

<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-Eigenschaftscroll-snap-type und andere Eigenschaften verwendet werden. Zum Beispiel:

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

Das folgende JavaScript-Snippet würde dasscrollsnapchanging Ereignis auf dem<main> Element auslösen, wenn eines seiner Kinder zu einem ausstehenden Snap-Ziel wird. In der Handler-Funktion setzen wir einepending Klasse auf das Kind, das durch diesnapTargetBlock Eigenschaft referenziert wird, die verwendet werden könnte, um es anders zu stylen, wenn das Ereignis ausgelöst wird.

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 diepending Klasse angewendet wurde, und entfernen sie, sodass nur das aktuellste ausstehende Snap-Ziel gestylt ist.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• scrollsnapchange Ereignis
• scrollend Ereignis
• SnapEvent
• CSSscroll-snap-type Eigenschaft
• CSS Scroll Snap Modul
• Verwendung von Scroll-Snap-Ereignissen
• Scroll Snap Events auf developer.chrome.com (2024)