Element: scrollsnapchanging Event
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 der Element
Schnittstelle wird auf dem Scroll-Container ausgelöst, wenn der Browser feststellt, dass ein neues Scroll-Snap-Ziel ansteht, d.h. es wird ausgewählt, wenn die aktuelle Scroll-Geste endet.
Insbesondere wird dieses Ereignis während einer Scroll-Geste ausgelöst, jedes Mal, wenn der Benutzer über potenzielle neue Snap-Ziele bewegt. Zum Beispiel könnte der Benutzer langsam scrollen, indem er seinen Finger auf einem Touchscreen-Gerät bewegt, oder die Maustaste auf einer Scroll-Leiste gedrückt hält und die Maus bewegt. scrollsnapchanging
kann daher mehrmals für jede Scroll-Geste ausgelöst werden.
Es wird jedoch nicht bei allen potenziellen Snap-Zielen für eine Scroll-Geste ausgelöst, die über mehrere Snap-Ziele bewegt. Vielmehr wird es nur für das letzte Ziel ausgelöst, auf dem das Snapping potenziell ruhen wird.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener()
, oder setzen Sie eine Event-Handler-Eigenschaft.
addEventListener("scrollsnapchanging", (event) => {});
onscrollsnapchanging = (event) => {};
Ereignistyp
Beispiele
Grundlegende Nutzung
Angenommen, wir haben ein <main>
-Element, das erheblichen Inhalt enthält, wodurch es scrollt:
<main>
<!-- Significant content -->
</main>
Das <main>
-Element kann in einen Scroll-Container verwandelt werden, der zu seinen Kindern schnellt, wenn gescrollt wird, indem eine Kombination der CSS scroll-snap-type
Eigenschaft und andere Eigenschaften verwendet werden. Zum Beispiel:
main {
width: 250px;
height: 450px;
overflow: scroll;
scroll-snap-type: block mandatory;
}
Das folgende JavaScript-Beispiel würde das scrollsnapchanging
Ereignis auf dem <main>
-Element auslösen, wenn eines seiner Kinder ein anstehendes 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 anders zu stylen, wenn das Ereignis ausgelöst wird.
scrollingElem.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, auf die zuvor die pending
-Klasse angewendet wurde, und entfernen diese, sodass nur das zuletzt anstehende 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 module
- Verwendung von Scroll-Snap-Ereignissen
- Scroll Snap Events auf developer.chrome.com (2024)