Scroll-snap-align | CSS-Tricks

scroll-snap-align ist Teil des CSS Scroll Snap Module. Scroll Snapping bezieht sich auf das "Arretieren" der Position des Viewports an bestimmten Elementen auf der Seite, während das Fenster (oder ein scrollbarer Container) gescrollt wird. Stellen Sie sich einen Scroll-Snapping-Container wie einen Magneten auf einem Element vor, der an der Oberseite des Viewports haftet und die Seite zwingt, genau dort anzuhalten.

scroll-snap-align ist eine erforderliche Eigenschaft für ein scroll-snappendes Element innerhalb eines scroll-snappenden Containers. Weitere Informationen zu scroll-snappenden Containern finden Sie im Almanac-Eintrag zu scroll-snap-type. scroll-snap-align teilt dem Browser mit, welcher Teil eines Elements ausgerichtet werden soll, wenn ein Snap-Punkt erreicht wird: Soll das Element am start, center oder end des übergeordneten Containers, der die Eigenschaft scroll-snap-type enthält, ausgerichtet werden?

Wenn ein Element am Anfang dieses Elements einrasten soll, geben Sie ihm einen scroll-snap-align-Wert wie folgt

/* Assuming this element is a child of a container with `scroll-snap-type` set */
.element {
  scroll-snap-align: start;
}

Syntax

scroll-snap-align: [ none | start | end | center ]{1,2}

Sie können bis zu 2 Werte für diese Eigenschaft angeben, die die *Block*- und *Inline*-Achse darstellen. Wenn Sie nur 1 Wert angeben, wird dieser Wert für beide Achsen verwendet.

Werte

scroll-snap-align akzeptiert die folgenden Werte

none deaktiviert das Scroll Snapping für das Element
start richtet den Anfang des Elements am Schnappbereich des Scroll-Containers aus, wenn es einrastet
end richtet das Ende des Elements am Schnappbereich des Scroll-Containers aus, wenn es einrastet
center richtet die Mitte des Elements am Schnappbereich des Scroll-Containers aus, wenn es einrastet

Beispiel

Browser-Unterstützung

Diese Daten zur Browserunterstützung stammen von Caniuse, das weitere Details enthält. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.

Desktop

Chrome	Firefox	IE	Edge	Safari
69	68	11*	79	11

Mobil / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
127	127	127	11.0-11.2