CSS/Eigenschaften/scroll-snap-align

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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
  • Defaultwert: none
anwendbar auf alle Elemente (Unterschied Tag Element Attribut)
Browsersupport Details: caniuse.com
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

Weblinks

Siehe auch