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, bevor Sie diese produktiv verwenden.
Das scrollsnapchange
-Ereignis der Document
-Schnittstelle wird am Ende einer Scroll-Operation auf dem Dokument-Scroll-Container ausgelöst, wenn ein neues Scroll-Snap-Ziel ausgewählt wird.
Dieses Ereignis funktioniert ähnlich wie das Element
-Schnittstellenereignis scrollsnapchange
, mit der Ausnahme, 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 wie addEventListener()
oder setzen Sie eine Ereignishandler-Eigenschaft.
addEventListener("scrollsnapchange", (event) => {});
onscrollsnapchange = (event) => {};
Ereignistyp
Beispiele
Grundlegende Verwendung
Angenommen, wir haben ein <main>
-Element, das erheblichen Inhalt enthält, der es scrollen lässt:
<main>
<!-- Significant content -->
</main>
Das <main>
-Element kann mit einer Kombination von CSS-Eigenschaften in einen Scroll-Container verwandelt werden, beispielsweise:
main {
width: 250px;
height: 450px;
overflow: scroll;
}
Wir können dann das Scroll-Snap-Verhalten auf dem scrollenden Inhalt implementieren, indem wir die Eigenschaft scroll-snap-type
auf dem <html>
-Element angeben:
html {
scroll-snap-type: block mandatory;
}
Der folgende JavaScript-Ausschnitt würde das scrollsnapchange
-Ereignis auf dem HTML-Dokument auslösen, wenn ein Kind des <main>
-Elements ein neu ausgewähltes Snap-Ziel wird. In der Handlerfunktion setzen wir eine selected
-Klasse auf das Kind, auf das durch die SnapEvent.snapTargetBlock
verwiesen wird, die verwendet werden könnte, um es so zu gestalten, dass es wie ausgewählt aussieht (z. B. 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
BCD tables only load in the browser
Siehe auch
scrollsnapchanging
-Ereignisscrollend
-EreignisSnapEvent
- CSS-Eigenschaft
scroll-snap-type
- CSS Scroll-Snap-Modul
- Verwendung von Scroll-Snap-Ereignissen
- Scroll Snap Events auf developer.chrome.com (2024)