Dokument: scrollsnapchange 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 scrollsnapchange Ereignis der Document Schnittstelle wird am Dokument-Scrollcontainer am Ende eines Scrollvorgangs ausgelöst, wenn ein neues Scroll-Snap-Ziel ausgewählt wird.
Dieses Ereignis funktioniert ähnlich wie das scrollsnapchange Ereignis der Element Schnittstelle, mit der Ausnahme, dass das gesamte HTML-Dokument als Scroll-Snap-Container gesetzt werden muss (d.h. scroll-snap-type ist auf dem <html> Element gesetzt).
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandlereigenschaft.
addEventListener("scrollsnapchange", (event) => { }) onscrollsnapchange = (event) => { } Ereignistyp
Beispiele
Grundlegende Verwendung
Angenommen, wir haben ein <main> Element, das erheblichen Inhalt enthält, der zum Scrollen führt:
<main> <!-- Significant content --> </main> Das <main> Element kann mithilfe 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 dem scrollenden Inhalt umsetzen, indem wir die scroll-snap-type Eigenschaft auf dem <html> Element spezifizieren:
html { scroll-snap-type: block mandatory; } Das folgende JavaScript-Snippet würde das scrollsnapchange Ereignis auf dem HTML-Dokument auslösen, wenn ein Kind des <main> Elements zu einem neu ausgewählten Snap-Ziel wird. In der Handlerfunktion setzen wir eine selected Klasse auf das Kind, das durch SnapEvent.snapTargetBlock referenziert wird. Diese Klasse könnte verwendet werden, um es so zu stylen, dass es aussieht, als ob es ausgewählt wurde (zum Beispiel mit einer Animation), wenn das Ereignis ausgelöst wird.
document.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)