Element: scrollsnapchange-Ereignis

Syntax

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

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

onscrollsnapchange = (event) => { }

Ereignistyp

Ein SnapEvent, das vom generischen Event-Typ erbt.

Beispiele

Grundlegende Verwendung

Angenommen, wir haben ein <main>-Element, das signifikanten Inhalt enthält, der es zum Scrollen bringt:

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

Das <main>-Element kann mit einer Kombination aus der CSS-Eigenschaft scroll-snap-type und anderen Eigenschaften in einen Scroll-Container umgewandelt werden, der beim Scrollen zu seinen untergeordneten Elementen schnappt. Zum Beispiel:

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

Das folgende JavaScript-Snippet würde das scrollsnapchange-Ereignis auf dem <main>-Element auslösen, wenn eines seiner Kinder zu einem neu ausgewählten Snap-Ziel wird. In der Handler-Funktion setzen wir eine selected-Klasse auf das Kind, das durch die Eigenschaft SnapEvent.snapTargetBlock referenziert wird. Diese Klasse kann verwendet werden, um es so zu stylen, dass es wie ausgewählt aussieht (zum Beispiel mit einer Animation), wenn das Ereignis ausgelöst wird.

const scrollingElem = document.querySelector("main");

scrollingElem.addEventListener("scrollsnapchange", (event) => {
  event.snapTargetBlock.classList.add("selected");
});

Spezifikationen

Browser-Kompatibilität

Siehe auch

• scrollsnapchanging Ereignis
• scrollend Ereignis
• SnapEvent
• CSS-Eigenschaft scroll-snap-type
• CSS Scroll Snap Modul
• Verwenden von Scroll Snap-Ereignissen
• Scroll Snap Events auf developer.chrome.com (2024)