scroll-margin-inline-start
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.
Die Eigenschaft scroll-margin-inline-start definiert den Rand des Scroll-Snap-Bereichs am Anfang der Inline-Dimension, die verwendet wird, um dieses Box-Element an den Snapport zu snappen. Der Scroll-Snap-Bereich wird bestimmt, indem die transformierte Border-Box genommen wird, ihre rechteckige Begrenzungsbox (achsenparallel im Koordinatenraum des Scroll-Containers) ermittelt und dann die angegebenen Auslagerungen hinzugefügt werden.
Probieren Sie es aus
scroll-margin-inline-start: 0;
scroll-margin-inline-start: 20px;
scroll-margin-inline-start: 2em;
<section class="default-example" id="default-example">
<div class="scroller">
<div>1</div>
<div id="example-element">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%;
}
.scroller {
text-align: left;
width: 250px;
height: 250px;
overflow-x: scroll;
display: flex;
box-sizing: border-box;
border: 1px solid black;
scroll-snap-type: x mandatory;
}
.scroller > 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;
}
.scroller > div:nth-child(even) {
background-color: white;
color: rebeccapurple;
}
Syntax
/* <length> values */
scroll-margin-inline-start: 10px;
scroll-margin-inline-start: 1em;
/* Global values */
scroll-margin-inline-start: inherit;
scroll-margin-inline-start: initial;
scroll-margin-inline-start: revert;
scroll-margin-inline-start: revert-layer;
scroll-margin-inline-start: unset;
Werte
<length>-
Ein Rand von der Inline-Startkante des Scroll-Containers.
Formale Definition
| Anfangswert | 0 |
|---|---|
| Anwendbar auf | alle Elemente |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | by computed value type |
Formale Syntax
scroll-margin-inline-start =
<length>
Beispiele
Grundlegende Demonstration
Dieses Beispiel implementiert etwas ganz Ähnliches wie das interaktive Beispiel oben, außer dass wir Ihnen hier erklären, wie es implementiert wird.
Das Ziel hier ist es, vier horizontal scrollende Blöcke zu erstellen, von denen der zweite und dritte an einer Position einrasten, die nahe, aber nicht ganz links von jedem Block liegt.
HTML
Das HTML enthält einen Scroller mit vier Kindern:
<div class="scroller">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
CSS
Lassen Sie uns das CSS durchgehen. Der äußere Container ist wie folgt gestaltet:
.scroller {
text-align: left;
width: 250px;
height: 250px;
overflow-x: scroll;
display: flex;
box-sizing: border-box;
border: 1px solid black;
scroll-snap-type: x mandatory;
}
Die Hauptteile, die für das Scroll-Snapping relevant sind, sind overflow-x: scroll, was sicherstellt, dass die Inhalte scrollen und nicht verborgen werden, und scroll-snap-type: x mandatory, was vorschreibt, dass das Scroll-Snapping entlang der horizontalen Achse erfolgen muss und das Scrollen immer an einem Snap-Punkt zum Stillstand kommen wird.
Die Kindelemente sind wie folgt gestaltet:
.scroller > 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;
}
.scroller > div:nth-child(2n) {
background-color: white;
color: rebeccapurple;
}
Der relevanteste Teil hier ist scroll-snap-align: start, der angibt, dass die linken Kanten (die "Starts" entlang der x-Achse, in unserem Fall) die festgelegten Snap-Punkte sind.
Zuletzt spezifizieren wir die Scroll-Margin-Werte, einen anderen für das zweite und dritte Kindelement:
.scroller > div:nth-child(2) {
scroll-margin-inline-start: 1rem;
}
.scroller > div:nth-child(3) {
scroll-margin-inline-start: 2rem;
}
Das bedeutet, dass beim Scrollen über die mittleren Kindelemente das Scrollen bei 1rem außerhalb der Inline-Startkante des zweiten <div> und 2rems außerhalb der Inline-Startkante des dritten <div> einrasten wird.
Ergebnis
Probieren Sie es selbst aus:
Spezifikationen
| Specification |
|---|
| CSS Scroll Snap Module Level 1 # margin-longhands-logical |
Browser-Kompatibilität
Siehe auch
- CSS scroll snap Modul
- Gut kontrolliertes Scrollen mit CSS scroll snap auf web.dev (2018)