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 vor der Verwendung auf produktiven Webseiten.
Das scrollsnapchanging-Ereignis des Document Interfaces wird auf dem Scroll-Container ausgelöst, wenn der Browser feststellt, dass ein neues Ziel für das Scroll-Schnappen bevorsteht, d.h. es wird ausgewählt, wenn das aktuelle Scroll-Gesten endet.
Dieses Ereignis funktioniert ähnlich wie das Element Interface-Ereignis scrollsnapchanging, außer dass das gesamte HTML-Dokument als Scroll-Snap-Container festgelegt sein 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 Ereignis-Handler-Eigenschaft.
addEventListener("scrollsnapchanging", (event) => { })
onscrollsnapchanging = (event) => { }
Ereignistyp
Beispiele
Grundlegende Verwendung
Angenommen, wir haben ein <main> Element, das signifikante Inhalte enthält, die ein Scrollen verursachen:
<main>
<!-- Significant content -->
</main>
Das <main> Element kann durch eine 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 den scrollenden Inhalt implementieren, 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 scrollsnapchanging Ereignis auf dem HTML-Dokument auslösen, wenn ein Kind des <main> Elements ein anstehendes Snap-Ziel wird. In der Handler-Funktion setzen wir eine pending Klasse auf das Kind, das durch die snapTargetBlock Eigenschaft referenziert wird, die verwendet werden könnte, um es anders 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, denen zuvor die pending Klasse zugewiesen wurde, und entfernen diese, sodass nur das neueste anstehende Snap-Ziel gestylt wird.
Spezifikationen
| Specification |
|---|
| 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-Ereignisse auf developer.chrome.com (2024)