Window: 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 des Window
-Interfaces wird am window
am Ende eines Scroll-Vorgangs ausgelöst, wenn ein neues Scroll-Snap-Ziel ausgewählt wird.
Dieses Ereignis funktioniert ähnlich wie das Element
-Interface-Ereignis scrollsnapchange
, außer dass das gesamte HTML-Dokument als Scroll-Snap-Container festgelegt 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 Event-Handler-Eigenschaft.
addEventListener("scrollsnapchange", (event) => {});
onscrollsnapchange = (event) => {};
Ereignistyp
Beispiele
Grundlegende Verwendung
Angenommen, wir haben ein <main>
-Element, das signifikanten Inhalt enthält und es dadurch scrollbar macht:
<main>
<!-- Significant content -->
</main>
Das <main>
-Element kann mit einer Kombination von CSS-Eigenschaften in einen Scroll-Container verwandelt werden, zum Beispiel:
main {
width: 250px;
height: 450px;
overflow: scroll;
}
Wir können dann ein Scroll-Snap-Verhalten auf dem scrollenden Inhalt implementieren, indem wir die scroll-snap-type
-Eigenschaft auf dem <html>
-Element festlegen:
html {
scroll-snap-type: block mandatory;
}
Der folgende JavaScript-Code-Snippet würde dazu führen, dass das scrollsnapchange
-Ereignis auf dem HTML-Dokument ausgelöst wird, wenn ein Kind des <main>
-Elements zu einem neu ausgewählten Snap-Ziel wird. In der Handler-Funktion setzen wir eine selected
-Klasse auf das Kind, das durch das SnapEvent.snapTargetBlock
referenziert wird, die verwendet werden könnte, um es so zu gestalten, 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
BCD tables only load in the browser
Siehe auch
scrollsnapchanging
Ereignisscrollend
EreignisSnapEvent
- CSS
scroll-snap-type
Eigenschaft - CSS scroll snap module
- Verwendung von Scroll-Snap-Ereignissen
- Scroll Snap Events auf developer.chrome.com (2024)