scroll-snap-type

Die Eigenschaft scroll-snap-type ist Teil des CSS Scroll Snap Module. Scroll-Snapping bezieht sich auf das "Arretieren" der Position des Viewports auf bestimmten Elementen der Seite, während das Fenster (oder ein scrollbarer Container) gescrollt wird. Stellen Sie es sich wie einen Magneten vor, der oben auf einem Element angebracht ist, das am oberen Rand des Viewports haftet und die Seite zwingt, genau dort zu stoppen.

Dies ist nützlich, wenn Sie möchten, dass der Browser an bestimmten Punkten auf der Seite stoppt. Zum Beispiel: Ein Benutzer, der eine Fotogalerie durchsucht, möchte wahrscheinlich nicht halb an einem Bild vorbeiscrollen – er würde es wahrscheinlich vorziehen, dass das Bild beim Scrollen in die richtige Position "schnappt". Scroll-Snapping bietet Entwicklern eine reine CSS-Möglichkeit, dieses Verhalten zu handhaben.

scroll-snap-type ist eine erforderliche Eigenschaft für jeden scrollbaren Container, auf den Sie Scroll-Snapping anwenden möchten. Sie beantwortet drei Fragen für einen Scroll-Container:

1. Verwendet der Container Scroll-Snapping?
2. Auf welcher Achse – x (horizontal), y (vertikal), Block oder Inline – soll das Scroll-Snapping angewendet werden?
3. Wie soll das Scroll-Snapping funktionieren? Wird es 100 % der Zeit erzwungen oder tritt es nur in Kraft, wenn der Benutzer "nahe genug" an eine Snap-Position gelangt? Mehr dazu später.

.scroll-container {
  /* Always force (mandatory) scrolling to a snap point on the y-axis */
  scroll-snap-type: y mandatory;
}

Syntax

scroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proximity ]

Werte

scroll-snap-type akzeptiert die folgenden Werte

• none deaktiviert Scroll-Snapping.
• x aktiviert Scroll-Snapping nur entlang der x-Achse.
• y aktiviert Scroll-Snapping nur entlang der y-Achse.
• block aktiviert Scroll-Snapping nur entlang der Block-Achse.
• inline aktiviert Scroll-Snapping nur entlang der Inline-Achse.
• both aktiviert Scroll-Snapping entlang beider Achsen (was Sie als x *und* y oder inline *und* block auffassen können.
• mandatory ist ein Strictness-Wert, der dem Browser sagt, dass er *immer* zu einer Snap-Position wechseln soll, wenn nicht gescrollt wird.
• proximity ist ein Strictness-Wert, der dem Browser sagt, dass er zu einer Snap-Position wechseln soll, wenn eine Scroll-Aktion *ziemlich nah* an eine Snap-Position gelangt. Wenn sie nicht *ziemlich nah* ist, soll der Browser nicht snappen und das Scrollen wird normal funktionieren.

Beispiel

Sehen Sie sich den Pen scroll-snap-type example
von CSS-Tricks (@css-tricks) auf CodePen an.

Browser-Unterstützung

Verwandt

• scroll-padding
• scroll-margin
• scroll-snap-align
• scroll-snap-stop

Ressourcen

• CSS Scroll Snap W3C Candidate Recommendation
• Praktisches CSS Scroll Snapping
• Einführung in CSS Scroll Snap Points