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 Scrollränder eines Elements gleichzeitig und weist Werte zu, ähnlich wie die margin-Eigenschaft dies für die Ränder eines Elements tut.
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;
}
Zusammensetzende Eigenschaften
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 Abstand vom entsprechenden Rand des Scrollcontainers.
Beschreibung
Sie können den Effekt von scroll-margin sehen, indem Sie zu einem Punkt zwischen zwei der "Seiten" des Beispielinhalts scrollen. Der für scroll-margin angegebene Wert bestimmt, wie viel von der Seite, die sich hauptsächlich außerhalb des snapport befindet, sichtbar bleiben soll.
Die scroll-margin-Werte stellen somit Abstände dar, die den Scroll-Snap-Bereich definieren, der verwendet wird, um dieses Feld an den Snapport anzupassen. Der Scroll-Snap-Bereich wird bestimmt, indem das transformierte Border-Box genommen wird, sein rechteckiger Begrenzungsrahmen (achsenparallel im Koordinatenraum des Scrollcontainers) gefunden 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 =
<length>{1,4}
Beispiele
Grundlegende Demonstration
Dieses Beispiel implementiert etwas sehr Ähnliches wie das interaktive Beispiel oben, außer dass wir Ihnen hier erklären, wie es implementiert ist.
Das Ziel hier ist es, vier horizontal scrollende Blöcke zu erstellen, von denen die zweiten und dritten fast, aber nicht ganz an die linke Seite 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 das CSS durchgehen. Der äußere Container ist folgendermaßen 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 Hauptaspekte, die für das Scrollen von Bedeutung sind, sind overflow-x: scroll, das sicherstellt, dass die Inhalte scrollen und nicht verdeckt werden, und scroll-snap-type: x mandatory, das vorschreibt, dass das Scrollen entlang der horizontalen Achse einrasten muss und das Scrollen immer auf einem Einrastpunkt zum Stillstand 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: 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 Einrastpunkte sind.
Zuletzt spezifizieren wir die Scroll-Margin-Werte, 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 über die mittleren Kindelemente das Scrollen bis 1rem außerhalb des linken Randes des zweiten <div> und 2rems außerhalb des linken Randes des dritten <div> einrastet.
Hinweis:
Hier setzen wir scroll-margin auf allen Seiten gleichzeitig, aber nur die Startkante ist wirklich relevant. Es würde hier ebenso gut funktionieren, nur an dieser einen Kante eine Scroll-Margin festzulegen, zum Beispiel mit scroll-margin-inline-start: 1rem, oder scroll-margin: 0 0 0 1rem.
Ergebnis
Versuchen Sie es selbst:
Spezifikationen
| Specification |
|---|
| CSS Scroll Snap Module Level 1 # scroll-margin |
Browser-Kompatibilität
Loading…