scroll-margin
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2021.
Die scroll-margin Kurzschreibweise setzt alle Scroll-Abstände eines Elements auf einmal fest, indem Werte ähnlich der margin
Probieren Sie es aus
scroll-margin: 0;
scroll-margin: 20px;
scroll-margin: 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 .info {
inline-size: 100%;
padding: 0.5em 0;
font-size: 90%;
writing-mode: vertical-rl;
}
.scroller {
text-align: left;
height: 250px;
width: 270px;
overflow-y: scroll;
display: flex;
flex-direction: column;
box-sizing: border-box;
border: 1px solid black;
scroll-snap-type: y mandatory;
}
.scroller > div {
flex: 0 0 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;
}
Bestandeigenschaften
Diese Eigenschaft ist eine Kurzschreibweise für die folgenden CSS-Eigenschaften:
Syntax
/* <length> values */
scroll-margin: 10px;
scroll-margin: 1em 0.5em 1em 1em;
/* Global values */
scroll-margin: inherit;
scroll-margin: initial;
scroll-margin: revert;
scroll-margin: revert-layer;
scroll-margin: unset;
Werte
<length>-
Ein Versatz vom entsprechenden Rand des Scroll-Containers.
Beschreibung
Sie können die Wirkung von scroll-margin sehen, indem Sie zu einem Punkt zwischen zwei der "Seiten" des Beispiels scrollen. Der für scroll-margin angegebene Wert bestimmt, wie viel von der Seite, die hauptsächlich außerhalb des Snapports liegt, sichtbar bleiben soll.
Die scroll-margin-Werte stellen daher Versätze dar, die den Scroll-Snap-Bereich definieren, der verwendet wird, um dieses Feld an den Snapport zu schnappen. Der Scroll-Snap-Bereich wird bestimmt, indem der transformierte Randbereich genommen, seine rechteckige Begrenzungsbox gefunden (achsenparallel im Koordinatenraum des Scroll-Containers), und dann die angegebenen Versätze 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 =
<length>{1,4}
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.
Ziel ist es, vier horizontal scrollende Blöcke zu erstellen, wobei der zweite und dritte Block in der Nähe, aber nicht ganz am linken Rand jedes Blocks einrasten.
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 den CSS-Code 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 Hauptbestandteile, die für das Scroll-Snapping relevant sind, sind overflow-x: scroll, das sicherstellt, dass die Inhalte scrollen können und nicht verborgen werden, und scroll-snap-type: x mandatory, das vorschreibt, dass entlang der horizontalen Achse zwingend Scroll-Snapping auftreten muss, und der Scroll-Vorgang immer an einem Snap-Punkt endet.
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: 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 Ränder (die "Anfänge" entlang der x-Achse, in unserem Fall) die vorgesehenen Snap-Punkte sind.
Zuletzt legen wir die Scroll-Margin-Werte fest, einen anderen für das zweite und dritte Kindelement:
.scroller > div:nth-child(2) {
scroll-margin: 1rem;
}
.scroller > div:nth-child(3) {
scroll-margin: 2rem;
}
Das bedeutet, dass beim Scrollen an den mittleren Kindelementen der Scroll-Vorgang 1rem außerhalb des linken Randes des zweiten <div> einrastet und 2rems außerhalb des linken Randes des dritten <div>.
Hinweis:
Hier setzen wir scroll-margin auf allen Seiten gleichzeitig, aber nur die Startkante ist wirklich relevant. Es würde hier genauso gut funktionieren, nur einen Scroll-Rand an dieser Kante festzulegen, zum Beispiel mit scroll-margin-inline-start: 1rem oder scroll-margin: 0 0 0 1rem.
Ergebnis
Probieren Sie es selbst aus:
Spezifikationen
| Specification |
|---|
| CSS Scroll Snap Module Level 1 # scroll-margin |