Dokument: scrollsnapchange-Ereignis

Syntax

Verwenden Sie den Ereignisnamen in addEventListener():

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

Alternativ können Sie ihn der Ereignishandler-Eigenschaft der Schnittstelle zuweisen:

onscrollsnapchange = (event) => { }

Ereignistyp

Ein SnapEvent, das vom allgemeinen Typ Event erbt.

Beispiele

Grundlegende Verwendung

Angenommen, wir haben ein <main>-Element, das so viel Inhalt enthält, dass gescrollt werden muss:

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

Das <main>-Element lässt sich beispielsweise durch eine Kombination von CSS-Eigenschaften in einen Scroll-Container umwandeln:

main {
  width: 250px;
  height: 450px;
  overflow: scroll;
}

Anschließend können wir ein Scroll-Snap-Verhalten für den scrollbaren Inhalt implementieren, indem wir die Eigenschaft scroll-snap-type auf dem <html>-Element festlegen:

html {
  scroll-snap-type: block mandatory;
}

Das folgende JavaScript-Codefragment bewirkt, dass das scrollsnapchange-Ereignis auf dem HTML-Dokument ausgelöst wird, wenn ein Kindelement des <main>-Elements zum neu ausgewählten Snap-Ziel wird. In der Handler-Funktion weisen wir dem Kindelement, auf das SnapEvent.snapTargetBlock verweist, die Klasse selected zu. Damit könnte es beim Auslösen des Ereignisses so gestaltet werden, dass es ausgewählt aussieht – beispielsweise durch eine Animation.

document.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
• Scroll-Snap-Ereignisse verwenden
• Scroll-Snap-Ereignisse auf developer.chrome.com (2024)