CSS/Eigenschaften/scroll-snap-align

Die Eigenschaft scroll-snap-align legt die Fangposition des Rahmens als Ausrichtung seines Fangbereichs (als Ausrichtungsobjekt) innerhalb des Fangbereichs seines Fangcontainers (als Ausrichtungscontainer) fest. Die beiden Werte geben die Ausrichtung des Fangbereichs in der Blockachse bzw. in der Inline-Achse an. Wenn nur ein Wert angegeben wird, ist der zweite Wert standardmäßig der gleiche Wert.

Erlaubte Werte

• none: Die Box definiert keine Fangposition in dieser Achse.
• start: Die Startausrichtung des Scroll-Fangbereichs dieser Box, innerhalb des Fangbereichs des Scroll-Containers, ist eine Fangposition in dieser Achse.
• end: Die Endausrichtung des Scroll-Fangbereichs dieser Box, innerhalb des Snapports des Scroll-Containers, ist eine Fangposition in dieser Achse.
• center: Die mittlere Ausrichtung des Scroll-Fangbereichs dieser Box, innerhalb des Snapports des Scroll-Containers, ist eine Fangposition in dieser Achse.

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

none

anwendbar auf

alle Elemente

Vererbung

ja

animierbar

ja, diskret

Beispiel

body {
  margin: 0;
  scroll-snap-type: y mandatory; 
}

section {
  height: 100vh;
  scroll-snap-align: start; 
}

An der Oberkante jeder Sektion soll gestoppt werden

Siehe auch

• OnePager (Tutorial, wie man eine Single-Page Webseite mit CSS und JavaScript attraktiver macht)

Weblinks

• CSSWG.org: CSS Scroll Snap Module Level 1
• MDN: scroll-snap-align
• css-tricks: How to use CSS Scroll Snap