Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
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 eineexperimentelle Technologie
Überprüfen Sie dieBrowser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Dasscrollsnapchanging-Ereignis derWindow-Schnittstelle wird imwindow ausgelöst, wenn der Browser feststellt, dass ein neues Ziel für das Scroll-Snap ansteht, das ausgewählt wird, wenn die aktuelle Scroll-Geste endet.
Dieses Ereignis funktioniert ähnlich wie dasElement-Schnittstellescrollsnapchanging-Ereignis, mit dem Unterschied, 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 wieaddEventListener() oder setzen Sie eine Ereignishandler-Eigenschaft.
addEventListener("scrollsnapchanging", (event) => { })onscrollsnapchanging = (event) => { }Ereignistyp
Beispiele
Grundlegende Verwendung
Angenommen, wir haben ein<main>-Element, das wesentlichen Inhalt enthält, der ein Scrollen verursacht:
<main> <!-- Significant content --></main>Das<main>-Element kann unter Verwendung einer Kombination von CSS-Eigenschaften in einen Scroll-Container umgewandelt werden, zum Beispiel:
main { width: 250px; height: 450px; overflow: scroll;}Wir können dann das Scroll-Snap-Verhalten auf den scrollenden Inhalt umsetzen, indem wir diescroll-snap-type-Eigenschaft auf das<html>-Element anwenden:
html { scroll-snap-type: block mandatory;}Das folgende JavaScript-Snippet würde dasscrollsnapchanging-Ereignis im HTML-Dokument auslösen, wenn ein Kind des<main>-Elements zu einem anstehenden Snap-Ziel wird. In der Handler-Funktion setzen wir einepending-Klasse auf das Kind, das durch diesnapTargetBlock-Eigenschaft referenziert wird, welche verwendet werden könnte, um es anders zu stylen, wenn das Ereignis ausgelöst wird.
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 diepending-Klasse angewendet hatten, und entfernen diese, sodass nur das zuletzt anstehende Snap-Ziel gestylt ist.
Spezifikationen
| Specification |
|---|
| CSS Scroll Snap Module Level 2 # scrollsnapchanging |
Browser-Kompatibilität
Siehe auch
scrollsnapchangeEreignisscrollendEreignisSnapEvent- CSS
scroll-snap-typeEigenschaft - CSS Scroll Snap Modul
- Verwendung von Scroll Snap-Ereignissen
- Scroll Snap Events auf developer.chrome.com (2024)