scroll-snap-type

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 scroll-snap-type CSS-Eigenschaft wird auf einem Scroll-Container festgelegt, wodurch dieser in das Scroll-Snapping eintritt, indem die Richtung und Genauigkeit der Snap-Punkt-Durchsetzung innerhalb des Snap-Ports bestimmt wird.

Probieren Sie es aus

Wenn sich der Inhalt im Scroll-Port ändert – zum Beispiel, wenn Inhalte hinzugefügt, verschoben, gelöscht oder die Größe geändert werden – wird der Scroll-Container wieder auf den zuvor gesnappten Inhalt zurückspringen, sofern dieser Inhalt noch vorhanden ist.

Wird der Wert einer scrollsnap-bezogenen Eigenschaft, wie scroll-snap-type oder scroll-margin, geändert, wird der Scroll-Container sich basierend auf dem aktuellen Wert von scroll-snap-type neu ausrichten.

Die spezifizierten Animationen oder physikalischen Verhaltensweisen zur Umsetzung dieser Snap-Punkte sind nicht durch diese Eigenschaft abgedeckt, sondern dem Benutzeragenten überlassen.

Syntax

css
/* No snapping */
scroll-snap-type: none;

/* Keyword values for snap axes */
scroll-snap-type: x;
scroll-snap-type: y;
scroll-snap-type: block;
scroll-snap-type: inline;
scroll-snap-type: both;

/* Optional keyword values for snap strictness */
/* mandatory | proximity */
scroll-snap-type: x mandatory;
scroll-snap-type: y proximity;
scroll-snap-type: both mandatory;

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

Werte

none

Wenn der visuelle Viewport dieses Scroll-Containers gescrollt wird, müssen Snap-Punkte ignoriert werden.

x

Der Scroll-Container schnappt nur zu Snap-Positionen auf seiner horizontalen Achse.

y

Der Scroll-Container schnappt nur zu Snap-Positionen auf seiner vertikalen Achse.

block

Der Scroll-Container schnappt nur zu Snap-Positionen auf seiner Block-Achse.

inline

Der Scroll-Container schnappt nur zu Snap-Positionen auf seiner Inline-Achse.

both

Der Scroll-Container schnappt unabhängig auf beiden Achsen zu Snap-Positionen (möglicherweise Schnappen zu unterschiedlichen Elementen auf jeder Achse).

mandatory

Der visuelle Viewport dieses Scroll-Containers muss zu einer Snap-Position springen, wenn er nicht aktuell gescrollt wird.

proximity

Der visuelle Viewport dieses Scroll-Containers darf zu einer Snap-Position springen, wenn er nicht aktuell gescrollt wird. Der Benutzeragent entscheidet, ob gesprungen wird oder nicht, basierend auf den Scroll-Parametern. Dies ist die standardmäßige Snap-Strenge, wenn eine Snap-Achse angegeben ist.

Formale Definition

Anfangswertnone
Anwendbar aufalle Elemente
VererbtNein
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

scroll-snap-type = 
none |
[ x | y | block | inline | both ] [ mandatory | proximity ]?

Beispiele

Snapping auf verschiedenen Achsen

HTML

html
<main>
  <section class="x mandatory-scroll-snapping" dir="ltr">
    <div>X Mand. LTR</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </section>
  <section class="x proximity-scroll-snapping" dir="ltr">
    <div>X Prox. LTR</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </section>
  <section class="y mandatory-scroll-snapping" dir="ltr">
    <div>Y Mand. LTR</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </section>
  <section class="y proximity-scroll-snapping" dir="ltr">
    <div>Y Prox. LTR</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </section>
  <section class="x mandatory-scroll-snapping" dir="rtl">
    <div>X Mand. RTL</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </section>
  <section class="x proximity-scroll-snapping" dir="rtl">
    <div>X Prox. RTL</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </section>
  <section class="y mandatory-scroll-snapping" dir="rtl">
    <div>Y Mand. RTL</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </section>
  <section class="y proximity-scroll-snapping" dir="rtl">
    <div>Y Prox. RTL</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </section>
</main>

CSS

css
/* scroll-snap */
.x.mandatory-scroll-snapping {
  scroll-snap-type: x mandatory;
}
.x.proximity-scroll-snapping {
  scroll-snap-type: x proximity;
}
.y.mandatory-scroll-snapping {
  scroll-snap-type: y mandatory;
}
.y.proximity-scroll-snapping {
  scroll-snap-type: y proximity;
}

div {
  text-align: center;
  scroll-snap-align: center;
  flex: none;
}

Ergebnisse

Spezifikationen

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

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-type
block
both
inline
none
x
y

Legend

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

Full support
Full support
Partial support
Partial support
Requires a vendor prefix or different name for use.
Has more compatibility info.

Siehe auch