CSS/Eigenschaften/scroll-snap-type

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

Standardwert

none

anwendbar auf

alle Elemente

Vererbung

nein

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

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-type
• css-tricks: How to use CSS Scroll Snap