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 setzt alle Scrollränder eines Elements gleichzeitig und weist Werte ähnlich wie die margin-Eigenschaft für die Ränder eines Elements zu.

Probieren Sie es aus

Bestandteileigenschaften

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 Versatz 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 hauptsächlich außerhalb des snapports ist, sichtbar bleiben soll.

Daher stellen die scroll-margin-Werte Versätze dar, die den Scroll-Schnappbereich definieren, der für das Einrasten dieses Blocks in den Snapport verwendet wird. Der Scroll-Schnappbereich wird bestimmt, indem die transformierte Randbox genommen, ihr rechteckiger Begrenzungsrahmen (achsenbündig im Koordinatenraum des Scrollcontainers) gefunden und dann die angegebenen Versätze hinzugefügt werden.

Formale Definition

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

Formale Syntax

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

Beispiele

Einfache Demonstration

Dieses Beispiel implementiert etwas, das dem interaktiven Beispiel oben sehr ähnlich ist, außer dass wir Ihnen 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 ihren Platz einrasten, nicht ganz links vom jeweiligen Block.

HTML

Das HTML, das die Blöcke repräsentiert, ist sehr einfach:

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

CSS

Lassen Sie uns den CSS-Rundgang durchführen. Der äußere Container wird 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-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 wird immer an einem Snap-Punkt zum Stillstand kommen.

Die Kind-Elemente werden wie folgt gestaltet:

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, was spezifiziert, dass die linken Kanten (die "Starts" entlang der x-Achse, in unserem Fall) die bezeichneten Snap-Punkte sind.

Zuletzt spezifizieren wir die Scrollrand-Werte, einen anderen für das zweite und dritte Kind-Element:

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 Kind-Elementen das Scrollen zu 1rem außerhalb der linken Kante des zweiten <div> einrastet, und 2rems außerhalb der linken Kante des dritten <div>.

Hinweis: Hier setzen wir scroll-margin auf allen Seiten gleichzeitig, aber nur der Startpunkt ist wirklich relevant. Es würde ebenso gut funktionieren, hier nur einen Scrollrand an dieser einen Kante zu setzen, z.B. 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