Element: scrollsnapchanging Ereignis

Syntax

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

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

onscrollsnapchanging = (event) => { }

Ereignistyp

Ein SnapEvent, der vom generischen Event 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-Eigenschaft scroll-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 das scrollsnapchanging Ereignis auf dem <main> Element auslösen, wenn eines seiner Kinder zu einem ausstehenden Snap-Ziel wird. In der Handler-Funktion setzen wir eine pending Klasse auf das Kind, das durch die snapTargetBlock 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 die pending 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
• CSS scroll-snap-type Eigenschaft
• CSS Scroll Snap Modul
• Verwendung von Scroll-Snap-Ereignissen
• Scroll Snap Events auf developer.chrome.com (2024)