CSS/Eigenschaften/scroll-snap-type

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Eigenschaft scroll-snap-type legt fest, wie streng Fangpunkte auf dem Scroll-Container erzwungen werden, falls es einen gibt..

erlaubte Werte
  • none: Wenn der visuelle Viewport dieses Scroll-Containers gescrollt wird, muss er Fangpunkte ignorieren.
  • x: Der Scrollcontainer rastet nur an Fangpositionen in seiner horizontalen Achse ein.
  • y: Der Scrollcontainer rastet nur an Fangpositionen in seiner vertikalen Achse ein.
  • block: Der Scroll-Container rastet nur an Positionen in seiner Blockachse ein.
  • inline Der Scroll-Container rastet nur an Positionen in seiner Inline-Achse ein.
  • both: Der Scroll-Container rastet an Positionen in seinen beiden Achsen unabhängig voneinander ein (er rastet möglicherweise an verschiedenen Elementen in jeder Achse ein).
  • mandatory: Der visuelle Viewport dieses Scroll-Containers wird auf einem Fangpunkt ruhen, wenn er nicht gerade gescrollt wird. Das bedeutet, dass er an diesem Punkt einrastet, wenn die Scroll-Aktion beendet ist, falls möglich. Wenn Inhalt hinzugefügt, verschoben, gelöscht oder in der Größe verändert wird, wird der Scroll-Offset angepasst, um das Ruhen auf diesem Fangpunkt beizubehalten.
  • proximity: Der visuelle Viewport dieses Scroll-Containers kann auf einem Fangpunkt zur Ruhe kommen, wenn er unter Berücksichtigung der Scroll-Parameter des User Agents gerade nicht gescrollt wird. Wenn Inhalte hinzugefügt, verschoben, gelöscht oder in der Größe verändert werden, wird der Scroll-Offset möglicherweise angepasst, um das Ruhen auf diesem Fangpunkt beizubehalten.
  • Vererbung steuernde Werte inherit, initial, unset und revert
  • Defaultwert: none
anwendbar auf alle Elemente (Unterschied Tag Element Attribut)
Browsersupport Details: caniuse.com
Vererbung {{{wird_vererbt}}}
animierbar ja, diskret
Beispiel
body {
  margin: 0;
  scroll-snap-type: y mandatory; 
}

section {
  height: 100vh;
  scroll-snap-align: start; 
}
Vertikal Scrollen und Snap Points streng einhalten

Weblinks

Siehe auch