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 January 2020.

Die scroll-margin Kurzschreibweise legt alle Scroll-Margen eines Elements auf einmal fest, indem Werte ähnlich der margin-Eigenschaft für Margen eines Elements zugewiesen werden.

Probieren Sie es aus

Bestandeigenschaften

Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:

Syntax

css
/* <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 Scroll-Containers.

Beschreibung

Sie können den Effekt von scroll-margin sehen, indem Sie zu einem Punkt zwischen zwei "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 repräsentieren demnach Abstände, die den Scroll-Snap-Bereich definieren, der zum Einrasten dieses Feldes in den Snapport verwendet wird. Der Scroll-Snap-Bereich wird bestimmt, indem das transformierte Rahmen-Feld genommen, seine rechteckige Umrandungsbox (achsenbündig im Koordinatenraum des Scroll-Containers) gefunden und dann die angegebenen Abstände hinzugefügt werden.

Formale Definition

Initialer Wertwie die jeweiligen Kurzschreibweisen:
Anwendbar aufalle Elemente
VererbtNein
Berechneter Wertwie die jeweiligen Kurzschreibweisen:
Animationstypby computed value type

Formaler Syntax

scroll-margin = 
  <length>{1,4}

Beispiele

Grundlegende Demonstration

Dieses Beispiel implementiert etwas sehr Ähnliches wie das interaktive Beispiel oben, wobei wir hier erklären, wie es implementiert wird.

Das Ziel hier ist es, vier horizontal scrollende Blöcke zu erstellen, von denen der zweite und dritte an einer Position einrasten, die nahe, aber nicht ganz am linken Rand jedes Blocks liegt.

HTML

Das HTML umfasst einen Scroller mit vier Kindern:

html
<div class="scroller">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

CSS

Werfen wir einen Blick auf das CSS. Der äußere Container ist wie folgt gestaltet:

css
.scroller {
  text-align: left;
  width: 250px;
  height: 250px;
  overflow-x: scroll;
  display: flex;
  box-sizing: border-box;
  border: 1px solid #000;
  scroll-snap-type: x mandatory;
}

Die Hauptteile, die für das Scroll-Einrasten relevant sind, sind overflow-x: scroll, das sicherstellt, dass der Inhalt scrollt und nicht verborgen wird, und scroll-snap-type: x mandatory, das vorgibt, dass das Scroll-Einrasten entlang der horizontalen Achse erfolgen muss und das Scrollen immer an einem Snap-Punkt enden wird.

Die Kindelemente sind wie folgt gestylt:

css
.scroller > div {
  flex: 0 0 250px;
  width: 250px;
  background-color: #663399;
  color: #fff;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
}

.scroller > div:nth-child(2n) {
  background-color: #fff;
  color: #663399;
}

Der relevanteste Teil hier ist scroll-snap-align: start, das angibt, dass die linken Kanten (die "Anfänge" entlang der x-Achse, in unserem Fall) die vorgesehenen Einrastpunkte sind.

Zum Schluss spezifizieren wir die Scroll-Margin-Werte, ein anderer für das zweite und dritte Kindelement:

css
.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 bei 1rem außerhalb des linken Rands des zweiten <div> und 2rems außerhalb des linken Rands des dritten <div> einrasten wird.

Hinweis: Hier setzen wir scroll-margin auf allen Seiten gleichzeitig, aber nur der Start-Rand ist wirklich relevant. Es würde genauso gut funktionieren, hier nur einen Scroll-Margin an diesem einen Rand 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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch