Dokument: scrollsnapchanging-Ereignis

Syntax

Verwenden Sie den Ereignisnamen in addEventListener():

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

Alternativ können Sie dem Event-Handler-Attribut des Interfaces einen Wert zuweisen:

onscrollsnapchanging = (event) => { }

Ereignistyp

Ein SnapEvent, das vom allgemeinen Typ Event erbt.

Beispiele

Grundlegende Verwendung

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

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

Das <main>-Element kann mithilfe einer Kombination von CSS-Eigenschaften zu einem Scroll-Container gemacht werden, zum Beispiel:

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

Anschließend können wir Scroll-Snapping 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-Snippet bewirkt, dass das scrollsnapchanging-Ereignis auf dem HTML-Dokument ausgelöst wird, wenn ein Kindelement des <main>-Elements zu einem vorgemerkten Snap-Ziel wird. In der Handler-Funktion setzen wir die Klasse pending auf dem Kindelement, auf das die Eigenschaft snapTargetBlock verweist. Damit könnte es beim Auslösen des Ereignisses anders gestaltet werden.

document.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, denen zuvor die Klasse pending zugewiesen wurde, und entfernen sie. So wird nur das zuletzt vorgemerkte Snap-Ziel entsprechend gestaltet.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• scrollsnapchange-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)