Element: 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 Element-Schnittstelle wird auf dem Scroll-Container ausgelöst, wenn der Browser feststellt, dass ein neues Scroll-Snap-Ziel ansteht, also ausgewählt wird, sobald die aktuelle Scroll-Geste endet.
Dieses Ereignis wird während einer Scroll-Geste jedes Mal ausgelöst, wenn der Benutzer ein potenzielles neues Snap-Ziel erreicht. Beispielsweise kann der Benutzer langsam scrollen, indem er seinen Finger über den Touchscreen zieht, oder die Maustaste auf einer Bildlaufleiste gedrückt halten und die Maus bewegen. scrollsnapchanging kann daher während einer einzelnen Scroll-Geste mehrfach ausgelöst werden.
Bei einer Scroll-Geste, die über mehrere potenzielle Snap-Ziele führt, wird es jedoch nicht für alle diese Ziele ausgelöst. Stattdessen wird es nur für das letzte Ziel ausgelöst, an dem der Scrollvorgang möglicherweise einrastet.
Syntax
Verwenden Sie den Ereignisnamen in addEventListener():
addEventListener("scrollsnapchanging", (event) => { })
Alternativ können Sie ihn der Event-Handler-Eigenschaft der Schnittstelle zuweisen:
onscrollsnapchanging = (event) => { }
Ereignistyp
Beispiele
Grundlegende Verwendung
Angenommen, wir haben ein <main>-Element mit so viel Inhalt, dass es gescrollt werden kann:
<main>
<!-- Significant content -->
</main>
Mit der CSS-Eigenschaft scroll-snap-type und weiteren Eigenschaften lässt sich das <main>-Element in einen Scroll-Container umwandeln, der beim Scrollen an seinen Kindelementen einrastet. Zum Beispiel:
main {
width: 250px;
height: 450px;
overflow: scroll;
scroll-snap-type: block mandatory;
}
Der folgende JavaScript-Code führt dazu, dass das scrollsnapchanging-Ereignis auf dem <main>-Element ausgelöst wird, wenn eines seiner Kindelemente zu einem anstehenden Snap-Ziel wird. In der Handler-Funktion weisen wir dem Kindelement, auf das die Eigenschaft snapTargetBlock verweist, die Klasse pending zu. So kann es beim Auslösen des Ereignisses anders gestaltet werden.
Zu Beginn der Funktion wählen wir alle Elemente aus, denen zuvor die Klasse pending zugewiesen wurde, und entfernen die Klasse. Dadurch wird nur das zuletzt anstehende Snap-Ziel entsprechend gestaltet.
Spezifikationen
| Spezifikation |
|---|
| CSS Scroll Snap Module Level 2 # scrollsnapchanging |
Browser-Kompatibilität
Siehe auch
scrollsnapchange-Ereignisscrollend-EreignisSnapEvent- CSS-Eigenschaft
scroll-snap-type - CSS-Scroll-Snap-Modul
- Scroll-Snap-Ereignisse verwenden
- Scroll Snap Events auf developer.chrome.com (2024)