CSS scroll snap

Das Modul CSS scroll snap bietet Eigenschaften, mit denen Sie das Verhalten beim Schwenken und Scrollen steuern können, indem Sie Schnapppositionen definieren. Inhalte können in Position „einrasten“, während der Benutzer überlaufende Inhalte innerhalb eines scroll container scrollt, was das Blättern und die Scroll-Positionierung ermöglicht.

Dieses Modul umfasst die scroll-padding-Eigenschaften des Scrollcontainers, um den optimalen Betrachtungsbereich beim Blättern während der scroll-into-view Operationen anzupassen. Es enthält auch scroll-margin und scroll-alignment, die auf die Kinder des Scrollcontainers angewendet werden, um den visuellen Bereich der Kinderteile anzupassen, wenn dieses Kind in den Sichtbereich scrolled wird, sowie eine Eigenschaft, um das Scrollen auf einzelne Kinderteile zu erzwingen.

Scroll snap in Aktion

Um das Scroll-Snapping im Feld unten zu sehen, scrollen Sie nach oben und unten sowie nach links und rechts durch das Raster von 45 nummerierten Feldern im scrollbaren Viewport.

Mit Scroll snap wird eines der nummerierten Felder, zu denen Sie scrollen, in Position "einrasten". Das anfängliche CSS lässt das nummerierte Feld in die Mitte des Viewports "einrasten". Verwenden Sie die Schieberegler, um die Block- und Inline-Schnapppositionen zu ändern.

Mit snap-Eigenschaften können Sie das Scrollen über ein Element, in diesem Fall eine nummerierte Box, erlauben oder blockieren. Aktivieren Sie das Kontrollkästchen „Verhindern des Scrollens über Boxen“, um alle Scrollaktionen auf das Scrollen zu einem angrenzenden Feld zu beschränken.

Um Scroll-Snapping mit normalem Scrollen zu vergleichen, aktivieren Sie das Kontrollkästchen „Snapping deaktivieren“ und versuchen Sie erneut zu scrollen.

Um den Code für dieses Beispiel zu sehen, sehen Sie den Quellcode auf GitHub an.

Referenz

Eigenschaften auf Containern

Eigenschaften auf Kindern

Ereignisse

Schnittstellen

Leitfäden

Grundlegende Konzepte von CSS scroll snap

Ein Überblick und Beispiele zu CSS scroll snap-Funktionen.

Verwenden von Scroll Snap-Ereignissen

Ein Leitfaden zur Verwendung der scroll snap-Ereignisse scrollsnapchanging und scrollsnapchange, die ausgelöst werden, wenn der Browser ein neues Snap-Ziel als ausstehend oder ausgewählt bestimmt.

Verwandte Konzepte

Spezifikationen

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

Siehe auch