Window: scrollsnapchanging Ereignis
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Want more browser support for this feature? Tell us why.
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Das scrollsnapchanging-Ereignis der Window-Schnittstelle wird im window 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 das Element-Schnittstelle scrollsnapchanging-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 wie addEventListener() 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 die scroll-snap-type-Eigenschaft auf das <html>-Element anwenden:
html {
scroll-snap-type: block mandatory;
}
Das folgende JavaScript-Snippet würde das scrollsnapchanging-Ereignis im HTML-Dokument auslösen, wenn ein Kind des <main>-Elements zu einem anstehenden Snap-Ziel wird. In der Handler-Funktion setzen wir eine pending-Klasse auf das Kind, das durch die snapTargetBlock-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 die pending-Klasse angewendet hatten, und entfernen diese, sodass nur das zuletzt anstehende Snap-Ziel gestylt ist.
Spezifikationen
| Spezifikation |
|---|
| 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)