Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
Window: scrollsnapchange Event
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.
Dasscrollsnapchange Ereignis derWindow Schnittstelle wird amwindow am Ende eines Scrollvorgangs ausgelöst, wenn ein neues Scroll-Snap-Ziel ausgewählt wird.
Dieses Ereignis funktioniert ähnlich wie dasElement Schnittstelle'sscrollsnapchange Ereignis, außer dass das gesamte HTML-Dokument als Scroll-Snap-Container festgelegt werden muss (d.h.scroll-snap-type wird auf dem<html> Element gesetzt).
Syntax
Verwenden Sie den Ereignisnamen in Methoden wieaddEventListener() oder setzen Sie eine Ereignis-Handler-Eigenschaft.
addEventListener("scrollsnapchange", (event) => { })onscrollsnapchange = (event) => { }Ereignistyp
Beispiele
Grundlegende Verwendung
Angenommen, wir haben ein<main> Element, das erheblichen Inhalt enthält, der dazu führt, dass es scrollt:
<main> <!-- Significant content --></main>Das<main> Element kann durch eine Kombination von CSS-Eigenschaften in einen Scroll-Container verwandelt werden, zum Beispiel:
main { width: 250px; height: 450px; overflow: scroll;}Wir können dann das Scroll-Snapping-Verhalten auf den scrollenden Inhalt implementieren, indem wir diescroll-snap-type Eigenschaft auf das<html> Element festlegen:
html { scroll-snap-type: block mandatory;}Das folgende JavaScript-Snippet würde bewirken, dass dasscrollsnapchange Ereignis im HTML-Dokument ausgelöst wird, wenn ein Kind des<main> Elements ein neu ausgewähltes Snap-Ziel wird. In der Handler-Funktion setzen wir eineselected Klasse auf das Kind, auf das durch denSnapEvent.snapTargetBlock verwiesen wird, die verwendet werden könnte, um es so zu stylen, dass es wie ausgewählt aussieht (zum Beispiel mit einer Animation), wenn das Ereignis ausgelöst wird.
window.addEventListener("scrollsnapchange", (event) => { event.snapTargetBlock.classList.add("selected");});Spezifikationen
| Specification |
|---|
| CSS Scroll Snap Module Level 2 # scrollsnapchange |
Browser-Kompatibilität
Siehe auch
scrollsnapchangingEreignisscrollendEreignisSnapEvent- CSS
scroll-snap-typeEigenschaft - CSS Scroll Snap Modul
- Verwendung von Scroll Snap-Ereignissen
- Scroll Snap Events auf developer.chrome.com (2024)