scroll-snap-type CSS property
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit April 2022 browserübergreifend verfügbar.
Die scroll-snap-type CSS-Eigenschaft wird auf einen Scroll-Container gesetzt, um das Scroll-Snapping zu aktivieren, indem die Richtung und Strenge der Snap-Point-Durchsetzung innerhalb des Snap-Ports festgelegt wird.
Probieren Sie es aus
scroll-snap-type: none;
scroll-snap-type: x mandatory;
scroll-snap-type: x proximity;
<section class="default-example" id="default-example">
<div id="example-element">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="info">Scroll »</div>
</section>
.default-example {
flex-wrap: wrap;
}
.default-example .info {
width: 100%;
padding: 0.5em 0;
font-size: 90%;
}
#example-element {
text-align: left;
width: 250px;
height: 250px;
overflow-x: scroll;
display: flex;
box-sizing: border-box;
border: 1px solid black;
}
#example-element > div {
flex: 0 0 250px;
width: 250px;
background-color: rebeccapurple;
color: white;
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
scroll-snap-align: start;
}
#example-element > div:nth-child(even) {
background-color: white;
color: rebeccapurple;
}
Wenn sich der Inhalt im Scroll-Port ändert – zum Beispiel, wenn Inhalte hinzugefügt, verschoben, gelöscht oder in ihrer Größe verändert werden – wird der Scroll-Container zum vorhergesnappten Inhalt zurücksnappen, sofern dieser Inhalt noch vorhanden ist.
Wenn der Wert einer scroll-snap-bezogenen Eigenschaft, wie scroll-snap-type oder scroll-margin, geändert wird, snappt der Scroll-Container basierend auf dem aktuellen Wert von scroll-snap-type neu.
Das Festlegen spezifischer Animationen oder physikalischer Effekte zur Durchsetzung dieser Snappunkte wird durch diese Eigenschaft nicht abgedeckt, sondern dem Benutzeragenten überlassen.
Syntax
/* 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 das visuelle Viewport dieses Scroll-Containers gescrollt wird, müssen Snap-Punkte ignoriert werden.
x-
Der Scroll-Container snappt nur zu Snap-Positionen auf seiner horizontalen Achse.
y-
Der Scroll-Container snappt nur zu Snap-Positionen auf seiner vertikalen Achse.
block-
Der Scroll-Container snappt nur zu Snap-Positionen auf seiner Block-Achse.
inline-
Der Scroll-Container snappt nur zu Snap-Positionen auf seiner Inline-Achse.
both-
Der Scroll-Container snappt unabhängig zu Snap-Positionen auf beiden Achsen (möglicherweise snappt er in jeder Achse zu unterschiedlichen Elementen).
mandatory-
Das visuelle Viewport dieses Scroll-Containers muss zu einer Snap-Position snappen, wenn es momentan nicht gescrollt ist.
proximity-
Das visuelle Viewport dieses Scroll-Containers kann zu einer Snap-Position snappen, wenn es momentan nicht gescrollt ist. Der Benutzeragent entscheidet, ob es snappt oder nicht, basierend auf den Scroll-Parametern. Dies ist die standardmäßige Snap-Strenge, wenn irgendeine Snap-Achse angegeben ist.
Formale Definition
| Anfangswert | none |
|---|---|
| Anwendbar auf | alle Elemente |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
scroll-snap-type =
none |
[ x | y | block | inline | both ] [ mandatory | proximity ]?
Beispiele
Snappen in verschiedenen Achsen
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
/* 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
| Spezifikation |
|---|
| CSS Scroll Snap Module Level 1 # scroll-snap-type |
Browser-Kompatibilität
Siehe auch
- Andere Scroll-Port-Eigenschaften:
scroll-margin,scroll-padding - Scroll-Kind-Eigenschaften:
scroll-snap-align,scroll-margin,scroll-snap-stop - Grundlegende Konzepte von CSS Scroll Snap
- Verwendung von Scroll Snap-Events
- CSS Scroll Snap Modul
- Gut kontrolliertes Scrollen mit CSS Scroll Snap auf web.dev (2018)