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 Abstand des Scroll-Snap-Bereichs am Beginn der Inline-Dimension, der verwendet wird, um dieses Box-Element an den Snapport zu schnappen. Der Scroll-Snap-Bereich wird bestimmt, indem die transformierte Border-Box genommen, deren rechteckige Begrenzungsbox (achsenparallel im Koordinatenraum des Scroll-Containers) gefunden und dann die angegebenen Abstände 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 Abstand vom Inline-Beginnrand 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 sehr Ähnliches wie das interaktive Beispiel oben, mit dem Unterschied, 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 Block an einer Stelle einrasten, die sich in der Nähe, aber nicht genau am linken Rand jedes Blocks befinden.
HTML
Das HTML umfasst 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 den CSS-Code durchgehen. Der äußere Container ist folgendermaßen 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 versteckt werden, und scroll-snap-type: x mandatory, was vorschreibt, dass Scroll-Snapping entlang der horizontalen Achse erfolgen muss, und dass das Scrollen immer an einem Snap-Punkt zur Ruhe 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 wichtigste Teil hier ist scroll-snap-align: start, der angibt, dass die linken Ränder (die "Starts" entlang der x-Achse, in unserem Fall) die vorgesehenen Snap-Punkte sind.
Zuletzt spezifizieren wir die Werte für den Scroll-Abstand, 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;
}
Dies bedeutet, dass beim Scrollen an den mittleren Kindelementen vorbei, das Scrollen 1rem außerhalb des Inline-Beginnrands des zweiten <div> und 2rems außerhalb des Inline-Beginnrands des dritten <div> einrastet.
Ergebnis
Probieren Sie es selbst aus:
Spezifikationen
| Specification |
|---|
| CSS Scroll Snap Module Level 1 # margin-longhands-logical |