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-Margen eines Elements auf einmal, indem Werte ähnlich wie bei der margin-Eigenschaft für Margen eines Elements zugewiesen werden.
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;
}
Bestandteileigenschaften
Diese Eigenschaft ist eine Kurzform 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 Vorstoß von der entsprechenden Kante des Scroll-Containers.
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 hauptsächlich außerhalb des snapport liegt, sichtbar bleiben soll.
Daher repräsentieren die scroll-margin-Werte Vorstöße, die den Scroll-Snap-Bereich definieren, der zum Einrasten dieses Kästchens am Snapport verwendet wird. Der Scroll-Snap-Bereich wird bestimmt, indem die transformierte Randbox genommen, ihre rechteckige Begrenzungsbox (achsenparallel im Koordinatenraum des Scroll-Containers) gefunden und dann die angegebenen Vorstöße 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, mit dem Unterschied, dass wir Ihnen hier erklären, wie es implementiert wird.
Das Ziel hier ist es, vier horizontal scrollbare Blöcke zu erstellen, von denen sich der zweite und dritte in der Nähe aber nicht ganz am linken Rand jedes Blocks einrasten.
HTML
Das HTML enthält 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 das CSS 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, das sicherstellt, dass die Inhalte scrollen und nicht verborgen werden, und scroll-snap-type: x mandatory, das vorschreibt, dass das Scroll-Snapping entlang der horizontalen Achse erfolgen muss, und das Scrollen immer an einem Snap-Punkt zum Stillstand kommt.
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 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 Snap-Punkte sind.
Zuletzt geben wir die Werte für den Scroll-Abstand an, ein anderer 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 vorbei, das Scrollen 1rem außerhalb der linken Kante des zweiten <div> und 2rems außerhalb der linken Kante 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 genauso gut funktionieren, nur an dieser einen Kante einen Scroll-Abstand zu setzen, 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 |