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

Schnittstellen

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- und scrollsnapchange-Scroll Snap-Ereignisse, die ausgelöst werden, wenn der Browser bestimmt, dass ein neues Snap-Ziel ansteht oder ausgewählt wurde.

Verwandte Konzepte

Spezifikationen

Specification
CSS Scroll Snap Module Level 1
CSS Scroll Snap Module Level 2

Siehe auch