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

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: scrollsnapchanging-Ereignis

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

Das scrollsnapchanging-Ereignis der Window-Schnittstelle wird im window ausgelöst, wenn der Browser erkennt, dass ein neues Ziel für das Scroll-Snap bevorsteht, d.h. es wird ausgewählt, wenn die aktuelle Scroll-Geste endet.

Dieses Ereignis funktioniert ähnlich wie das scrollsnapchanging-Ereignis der Element-Schnittstelle, mit der Ausnahme, dass das gesamte HTML-Dokument als Scroll-Snap-Container festgelegt werden muss (d.h. scroll-snap-type wird auf das <html>-Element gesetzt).

Syntax

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

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

onscrollsnapchanging = (event) => { }

Ereignistyp

Ein SnapEvent, der von dem generischen Event-Typ erbt.

Beispiele

Grundlegende Verwendung

Angenommen, wir haben ein <main>-Element mit erheblichem Inhalt, der es zum Scrollen veranlasst:

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

Das <main>-Element kann mit einer Kombination von CSS-Eigenschaften in einen Scroll-Container verwandelt werden, zum Beispiel:

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

Wir können dann ein Scroll-Snap-Verhalten für den scrollenden Inhalt implementieren, indem wir die scroll-snap-type-Eigenschaft auf das <html>-Element anwenden:

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

Das folgende JavaScript-Snippet würde das scrollsnapchanging-Ereignis auf dem HTML-Dokument auslösen, wenn ein Kind des <main>-Elements zu einem bevorstehenden Snap-Ziel wird. In der Handler-Funktion setzen wir eine pending-Klasse auf das Kind, das durch die snapTargetBlock-Eigenschaft referenziert wird, welche verwendet werden könnte, um es anders zu stylen, wenn das Ereignis ausgelöst wird.

js
window.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, die zuvor die pending-Klasse hatten, und entfernen sie, sodass nur das jüngste bevorstehende Snap-Ziel gestylt wird.

Spezifikationen

Specification
CSS Scroll Snap Module Level 2
# scrollsnapchanging

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.
Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden