scroll-margin-inline

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-inline Kurzform Eigenschaft setzt die Scroll-Margen eines Elements in der Inline-Dimension.

Probieren Sie es aus

Bestandteileigenschaften

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

Syntax

css
/* <length> values */
scroll-margin-inline: 10px;
scroll-margin-inline: 1em 0.5em;

/* Global values */
scroll-margin-inline: inherit;
scroll-margin-inline: initial;
scroll-margin-inline: revert;
scroll-margin-inline: revert-layer;
scroll-margin-inline: unset;

Werte

<length>

Ein Abstand vom entsprechenden Rand des Scroll-Containers.

Beschreibung

Die scroll-margin-Werte repräsentieren Abstände, die den Scroll-Snap-Bereich definieren, der zum Einrasten dieses Kastens am Snapport verwendet wird. Der Scroll-Snap-Bereich wird bestimmt, indem der transformierte Randkasten genommen wird, um dessen rechteckige Begrenzungsbox zu finden (achsenkonform im Koordinatenraum des Scroll-Containers), 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

Formale Syntax

scroll-margin-inline = 
  <length>{1,2}

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 wird.

Das Ziel hier ist es, vier horizontal scrollbare Blöcke zu erstellen, wobei der zweite und dritte Block einrasten, fast, aber nicht ganz, am rechten Ende jedes Blocks.

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

Gehen wir den CSS-Code durch. Der äußere Container ist folgendermaßen 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, was sicherstellt, dass der Inhalt scrollt und nicht verborgen wird, und scroll-snap-type: x mandatory, was vorschreibt, dass das Scroll-Snapping entlang der horizontalen Achse erfolgen muss und das Scrollen immer an einem Snap-Punkt endet.

Die Kindelemente sind 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: end;
}

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

Der relevanteste Teil hier ist scroll-snap-align: end, was angibt, dass die rechten Kanten (die "Endpunkte" entlang der x-Achse, in unserem Fall) die bezeichneten Schnapp-Punkte sind.

Zuletzt spezifizieren wir die Scroll-Margen-Werte, einen anderen für das zweite und dritte Kindelement:

css
.scroller > div:nth-child(2) {
  scroll-margin-inline: 1rem;
}

.scroller > div:nth-child(3) {
  scroll-margin-inline: 2rem;
}

Das bedeutet, dass beim Scrollen an den mittleren Kindelementen vorbei das Scrollen auf 1rem außerhalb des Inline-Endes des zweiten <div> und 2rems außerhalb des Inline-Endes des dritten <div> einrastet.

Hinweis: Hier setzen wir scroll-margin sowohl am Anfang als auch am Ende der Inline-Achse (x in unserem Fall), jedoch ist nur die Endkante wirklich relevant. Es würde hier genauso gut funktionieren, nur eine Scroll-Marge an dieser einen Kante zu setzen, beispielsweise mit scroll-margin-inline: 0 1rem oder scroll-margin-inline-end: 1rem.

Ergebnis

Versuchen Sie es selbst:

Spezifikationen

Specification
CSS Scroll Snap Module Level 1
# propdef-scroll-margin-inline

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch