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-Kurzformeigenschaft 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;
}
Bestandteilseigenschaften
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 Beginn von der entsprechenden Kante des Scroll-Containers.
Beschreibung
Die Werte der Scroll-Marge stellen Vergrößerungen dar, die den Scroll-Snap-Bereich definieren, der verwendet wird, um diese Box am Snapport einzurasten. Der Scroll-Snap-Bereich wird durch das Transformieren des Rahmenbereichs, das Finden seines rechteckigen Begrenzungsrahmens (achsenbündig im Koordinatenraum des Scroll-Containers) und das Hinzufügen der angegebenen Vergrößerungen bestimmt.
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, außer dass wir hier erklären, wie es implementiert ist.
Das Ziel hier ist es, vier horizontal scrollende Blöcke zu erstellen, von denen sich der zweite und dritte an ihren Platz einrasten, nahe aber nicht ganz am rechten Rand jedes Blocks.
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
Gehen wir durch das CSS. Der äußere Container ist wie folgt 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, das sicherstellt, dass der Inhalt scrollt und nicht verborgen ist, und scroll-snap-type: x mandatory, das vorschreibt, dass das Scroll-Snapping entlang der horizontalen Achse erfolgen muss und das Scrollen immer auf einem Snap-Punkt zum Stehen kommt.
Die Kindelemente 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 festlegt, dass die rechten Kanten (die "Ends" entlang der x-Achse, in unserem Fall) die festgelegten Snap-Punkte sind.
Zuletzt spezifizieren wir die Werte der Scroll-Margen, einen anderen für das zweite und dritte Kindelement:
.scroller > div:nth-child(2) {
scroll-margin-inline: 1rem;
}
.scroller > div:nth-child(3) {
scroll-margin-inline: 2rem;
}
Dies bedeutet, dass beim Scrollen vorbei an den mittleren Kindelementen das Scrollen an 1rem außerhalb der Inline-Endkante des zweiten <div> einrastet und 2rems außerhalb der Inline-Endkante des dritten <div>.
Hinweis:
Hier setzen wir scroll-margin sowohl am Anfang als auch am Ende der Inline-Achse (x in unserem Fall), aber nur die Endkante ist wirklich relevant. Es würde hier genauso gut funktionieren, nur eine Scroll-Marge an dieser einen Kante zu setzen, zum Beispiel mit scroll-margin-inline: 0 1rem oder scroll-margin-inline-end: 1rem.
Ergebnis
Probieren Sie es selbst:
Spezifikationen
| Specification |
|---|
| CSS Scroll Snap Module Level 1 # propdef-scroll-margin-inline |