Element: scrollsnapchange-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 scrollsnapchange-Ereignis der Element-Schnittstelle wird am Scroll-Container ausgelöst, wenn am Ende eines Scrollvorgangs ein neues Scroll-Snap-Ziel ausgewählt wurde – unmittelbar bevor das zugehörige scrollend-Ereignis ausgelöst wird.
Ein Scrollvorgang endet, wenn die nutzende Person das Scrollen innerhalb eines Scroll-Containers abschließt – beispielsweise per Touch-Geste oder durch Ziehen des Mauszeigers über eine Scrollleiste – und die Geste beendet.
Syntax
Verwenden Sie den Ereignisnamen in addEventListener():
addEventListener("scrollsnapchange", (event) => { })
Alternativ können Sie ihn der Event-Handler-Eigenschaft der Schnittstelle zuweisen:
onscrollsnapchange = (event) => { }
Ereignistyp
Beispiele
Grundlegende Verwendung
Angenommen, ein <main>-Element enthält so viel Inhalt, dass darin gescrollt werden muss:
<main>
<!-- Significant content -->
</main>
Das <main>-Element lässt sich mithilfe der CSS-Eigenschaft scroll-snap-type und weiterer Eigenschaften 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 bewirkt, dass das scrollsnapchange-Ereignis auf dem <main>-Element ausgelöst wird, wenn eines seiner Kindelemente zum neu ausgewählten Snap-Ziel wird. In der Handler-Funktion weisen wir dem Kindelement, auf das die Eigenschaft SnapEvent.snapTargetBlock verweist, die Klasse selected zu. Damit lässt es sich beim Auslösen des Ereignisses als ausgewählt darstellen, beispielsweise durch eine Animation.
const scrollingElem = document.querySelector("main");
scrollingElem.addEventListener("scrollsnapchange", (event) => {
event.snapTargetBlock.classList.add("selected");
});
Spezifikationen
| Spezifikation |
|---|
| CSS Scroll Snap Module Level 2 # scrollsnapchange |
Browser-Kompatibilität
Siehe auch
scrollsnapchanging-Ereignisscrollend-EreignisSnapEvent- CSS-Eigenschaft
scroll-snap-type - CSS-Scroll-Snap-Modul
- Scroll-Snap-Ereignisse verwenden
- Scroll Snap Events auf developer.chrome.com (2024)