scroll-snap-align

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Die Eigenschaft scroll-snap-align legt die Schnapp-Position eines Kastens als Ausrichtung seines Schnappbereichs (als Ausrichtungsgegenstand) innerhalb des Schnapp-Ports des Schnapp-Containers (als Ausrichtungscontainer) fest.

Probieren Sie es aus

Syntax

css
/* Single keyword value */
scroll-snap-align: none;
scroll-snap-align: center;
scroll-snap-align: start;
scroll-snap-align: end;

/* Two keyword values */
scroll-snap-align: start end;
scroll-snap-align: end center;
scroll-snap-align: center start;

/* Global values */
scroll-snap-align: inherit;
scroll-snap-align: initial;
scroll-snap-align: revert;
scroll-snap-align: revert-layer;
scroll-snap-align: unset;

Werte

Für die Eigenschaft scroll-snap-align können ein oder zwei Werte angegeben werden. Wenn ein Wert festgelegt ist, wird er auf beide Achsen (Block- und Inline-Achse) angewendet. Wenn zwei Werte festgelegt sind, steuert der erste Wert die Block-Achse und der zweite Wert die Inline-Achse.

none

Der Kasten definiert keine Schnapp-Position in dieser Achse.

start

Die Startausrichtung des Schnappbereichs dieses Kastens innerhalb des Schnappports des Scroll-Containers ist eine Schnapp-Position in dieser Achse.

end

Die Endausrichtung des Schnappbereichs dieses Kastens innerhalb des Schnappports des Scroll-Containers ist eine Schnapp-Position in dieser Achse.

center

Die Zentrums-Ausrichtung des Schnappbereichs dieses Kastens innerhalb des Schnappports des Scroll-Containers ist eine Schnapp-Position in dieser Achse.

Formale Definition

Anfangswertnone
Anwendbar aufalle Elemente
VererbtNein
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

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

Spezifikationen

Specification
CSS Scroll Snap Module Level 1
# scroll-snap-align

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
scroll-snap-align
center
end
none
start

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch