Dokument: scrollsnapchanging 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 scrollsnapchanging
-Ereignis des Document
Interfaces wird auf dem Scroll-Container ausgelöst, wenn der Browser ein neues Scroll-Snap-Ziel als ausstehend bestimmt, d. h. es wird ausgewählt, wenn die aktuelle Scroll-Geste endet.
Dieses Ereignis funktioniert ähnlich wie das scrollsnapchanging
Ereignis des Element
Interfaces, außer dass das gesamte HTML-Dokument als Scroll-Snap-Container festgelegt werden muss (d. h., scroll-snap-type
ist auf dem <html>
Element festgelegt).
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener()
oder setzen Sie eine Ereignis-Handler-Eigenschaft.
addEventListener("scrollsnapchanging", (event) => {});
onscrollsnapchanging = (event) => {};
Ereignistyp
Beispiele
Grundlegende Nutzung
Angenommen, wir haben ein <main>
Element, das umfangreiche Inhalte enthält, die es zum Scrollen bringen:
<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 das Scroll-Snap-Verhalten auf den scrollenden Inhalt implementieren, indem wir die scroll-snap-type
Eigenschaft auf das <html>
Element spezifizieren:
html {
scroll-snap-type: block mandatory;
}
Das folgende JavaScript-Snippet würde dazu führen, dass das scrollsnapchanging
-Ereignis auf dem HTML-Dokument ausgelöst wird, wenn ein Kind des <main>
Elements ein ausstehendes Snap-Ziel wird. In der Handler-Funktion setzen wir eine pending
Klasse auf das Kind, auf das durch die snapTargetBlock
Eigenschaft verwiesen wird, die verwendet werden könnte, um es unterschiedlich zu stylen, wenn das Ereignis ausgelöst wird.
document.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 aktuellste ausstehende Snap-Ziel gestylt wird.
Spezifikationen
Specification |
---|
CSS Scroll Snap Module Level 2 # scrollsnapchanging |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
scrollsnapchange
Ereignisscrollend
EreignisSnapEvent
- CSS
scroll-snap-type
Eigenschaft - CSS Scroll Snap Modul
- Verwendung von Scroll Snap Ereignissen
- Scroll Snap Events auf developer.chrome.com (2024)