scroll-margin-inline
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 scroll-margin-inline Kurzeigenschaft setzt die Scroll-Margen eines Elements in der Inline-Dimension.
Probieren Sie es aus
scroll-margin-inline: 0;
scroll-margin-inline: 40px 20px;
scroll-margin-inline: 4em 0;
scroll-margin-inline: 0px 3em;
<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: end;
}
.scroller > div:nth-child(even) {
background-color: white;
color: rebeccapurple;
}
Zugehörige Eigenschaften
Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:
Syntax
/* <length> values */
scroll-margin-inline: 10px;
scroll-margin-inline: 1em 0.5em;
/* Global values */
scroll-margin-inline: inherit;
scroll-margin-inline: initial;
scroll-margin-inline: revert;
scroll-margin-inline: revert-layer;
scroll-margin-inline: unset;
Werte
<length>-
Ein Abstand vom entsprechenden Rand des Scroll-Containers.
Beschreibung
Die Werte für die Scroll-Margen repräsentieren Abstände, die den Scroll-Snap-Bereich definieren, der für das Einrasten dieses Blocks zum Snapport verwendet wird. Der Scroll-Snap-Bereich wird ermittelt, indem der transformierte Randrahmen genommen, dessen rechteckiges Begrenzungsfeld (achsenparallel im Koordinatenraum des Scroll-Containers) gefunden wird, und dann die angegebenen Abstände hinzugefügt werden.
Formale Definition
| Anfangswert | wie die jeweiligen Kurzschreibweisen: |
|---|---|
| Anwendbar auf | alle Elemente |
| Vererbt | Nein |
| Berechneter Wert | wie die jeweiligen Kurzschreibweisen:
|
| Animationstyp | by computed value type |
Formale Syntax
scroll-margin-inline =
<length>{1,2}
Beispiele
Grundlegende Demonstration
Dieses Beispiel implementiert etwas sehr ähnliches wie das interaktive Beispiel oben, allerdings erklären wir hier, wie es implementiert wird.
Das Ziel ist es, vier horizontal scrollende Blöcke zu erstellen, wobei der zweite und dritte Block einrasten, nahe, aber nicht ganz am rechten Rand jedes Blocks.
HTML
Das HTML beinhaltet einen Scroller mit vier Kind-Elementen:
<div class="scroller">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
CSS
Lassen Sie uns den CSS durchgehen. Der äußere Container ist so gestylt:
.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 auf einem Snap-Punkt zum Stillstand kommt.
Die Kind-Elemente sind wie folgt gestylt:
.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: end;
}
.scroller > div:nth-child(2n) {
background-color: white;
color: rebeccapurple;
}
Der relevanteste Teil hier ist scroll-snap-align: end, welches angibt, dass die rechten Kanten (die "Enden" entlang der x-Achse, in unserem Fall) die vorgesehenen Snap-Punkte sind.
Zuletzt spezifizieren wir die Scroll-Margen-Werte, einen anderen für das zweite und dritte Kind-Element:
.scroller > div:nth-child(2) {
scroll-margin-inline: 1rem;
}
.scroller > div:nth-child(3) {
scroll-margin-inline: 2rem;
}
Das bedeutet, dass beim Scrollen über die mittleren Kind-Elemente das Scrollen bei 1rem außerhalb des Inline-Endrands des zweiten <div> und 2rems außerhalb des Inline-Endrands des dritten <div> einrastet.
Hinweis:
Hier setzen wir scroll-margin am Anfang und Ende der Inline-Achse (x in unserem Fall), aber nur der Endrand ist wirklich relevant. Es würde hier genauso gut funktionieren, nur eine Scroll-Marge an diesem einen Rand zu setzen, zum Beispiel mit scroll-margin-inline: 0 1rem oder scroll-margin-inline-end: 1rem.
Ergebnis
Probieren Sie es selbst aus:
Spezifikationen
| Specification |
|---|
| CSS Scroll Snap Module Level 1 # propdef-scroll-margin-inline |