1. Web
  2. Web-APIs
  3. Window
  4. scrollsnapchange

Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

Window: scrollsnapchange-Ereignis

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Want more browser support for this feature? Tell us why.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Das scrollsnapchange-Ereignis der Window-Schnittstelle wird am Ende eines Scrollvorgangs auf window ausgelöst, wenn ein neues Scroll-Snap-Ziel ausgewählt wird.

Dieses Ereignis funktioniert weitgehend wie das scrollsnapchange-Ereignis der Element-Schnittstelle. Allerdings muss das gesamte HTML-Dokument als Scroll-Snap-Container festgelegt sein (das heißt, scroll-snap-type muss auf dem <html>-Element gesetzt sein).

Syntax

Verwenden Sie den Ereignisnamen in addEventListener():

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

Alternativ können Sie der Event-Handler-Eigenschaft der Schnittstelle einen Wert zuweisen:

js
onscrollsnapchange = (event) => { }

Ereignistyp

Ein SnapEvent, das vom generischen Typ Event erbt.

Beispiele

Grundlegende Verwendung

Angenommen, wir haben ein <main>-Element mit so viel Inhalt, dass gescrollt werden muss:

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

Das <main>-Element kann durch eine Kombination von CSS-Eigenschaften in einen Scroll-Container umgewandelt werden, zum Beispiel:

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

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

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

Das folgende JavaScript-Snippet bewirkt, dass das scrollsnapchange-Ereignis auf dem HTML-Dokument ausgelöst wird, wenn ein Kindelement des <main>-Elements zu einem 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.

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

Spezifikationen

Spezifikation
CSS Scroll Snap Module Level 2
# scrollsnapchange

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.
Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden