CSS scroll snap
Das CSS Scroll Snap-Modul bietet Eigenschaften, mit denen Sie das Scroll- und Pan-Verhalten durch Definition von Snap-Positionen steuern können. Inhalte können in Position gebracht werden, wenn der Benutzer überlaufende Inhalte innerhalb eines Scrolling-Containers scrollt, was Paging und Scrollpositionierung ermöglicht.
Dieses Modul umfasst die Scroll-Container-Eigenschaften scroll-padding
, um die optimale Betrachtungsregion während der Scroll-into-View-Operationen einzustellen. Es enthält auch scroll-margin
und scroll-alignment
, die auf die Kinder des Scroll-Containers gesetzt werden, um den visuellen Bereich dieser Kinder anzupassen, wenn sie ins Blickfeld gescrollt werden, sowie eine Eigenschaft, um das Scrollen auf einzelne Kinder zu stoppen.
Scroll Snap in Aktion
Um das Scroll-Snapping im folgenden Feld zu sehen, scrollen Sie nach oben und unten sowie nach links und rechts durch das Gitter von 45 nummerierten Kästchen in der scrollbaren Ansicht. Klicken Sie auf "Play" im folgenden Beispiel, um es zu betrachten oder den Quellcode im MDN Playground zu bearbeiten:
Mit Scroll Snap wird eines der nummerierten Kästchen, zu denen Sie scrollen, an Ort und Stelle geschnappt. Das anfängliche CSS bewirkt, dass das nummerierte Kästchen in die Mitte des Ansichtsfensters geschnappt wird. Verwenden Sie die Slider, um die Block- und Inline-Snap-Positionen zu ändern.
Mithilfe von Snap-Eigenschaften können Sie das Scrollen an einem Element, in diesem Fall einem nummerierten Kästchen, erlauben oder blockieren. Wählen Sie das Kontrollkästchen "Scrolling über Kästchen verhindern", um alle Scrollaktionen darauf zu beschränken, zu einem benachbarten Kästchen zu scrollen.
Um Scroll Snapping mit normalem Scrollen zu vergleichen, deaktivieren Sie das Kontrollkästchen "Snapping deaktivieren" und versuchen Sie erneut zu scrollen.
Referenz
Eigenschaften auf Containern
Eigenschaften auf Kindern
Ereignisse
scrollsnapchange
Experimentellscrollsnapchanging
Experimentell
Schnittstellen
SnapEvent
ExperimentellSnapEvent.snapTargetBlock
ExperimentellSnapEvent.snapTargetInline
Experimentell
Leitfäden
- Grundkonzepte des CSS Scroll Snap
-
Ein Überblick und Beispiele zu den Funktionen von CSS Scroll Snap.
- Verwendung von Scroll Snap-Ereignissen
-
Ein Leitfaden zur Verwendung der
scrollsnapchanging
- undscrollsnapchange
-Scroll Snap-Ereignisse, die ausgelöst werden, wenn der Browser bestimmt, dass ein neues Snap-Ziel ansteht oder ausgewählt wurde.
Verwandte Konzepte
:target
Pseudo-Klasseoverflow
CSS-Eigenschaft- Element-Methode
scroll()
- Element-Methode
scrollBy()
- Element-Methode
scrollIntoView()
- Element-Methode
scrollTo()
- Element-Ereignis
scroll
- Element-Ereignis
scrollend
scrollbar
ARIA-Rolle- Scroll-Container-Glossary-Begriff
Spezifikationen
Specification |
---|
CSS Scroll Snap Module Level 1 |
CSS Scroll Snap Module Level 2 |
Siehe auch
- CSS Overflow-Modul
- CSS Scrollbars Styling-Modul
- CSS Scroll Anchoring-Modul
- Nur-Tastatur-Scrollbereiche auf adrianroselli.com (2022)
- Beispiele für Scroll Snap auf CodePen (2022)
- Gut kontrolliertes Scrollen mit CSS Scroll Snap auf web.dev (2021)
- Praktisches CSS Scroll Snapping auf CSS-Tricks (2020)
- CSS Scroll Snap auf 12 Days of Web (2019)