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

Probieren Sie es aus

Bestandeigenschaften

Diese Eigenschaft ist eine Kurzschreibweise 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 Versatz vom entsprechenden Rand des Scroll-Containers.

Beschreibung

Die scroll-margin-Werte repräsentieren Versätze, die den Scroll-Snap-Bereich definieren, der verwendet wird, um diese Box an den Snapport zu fangen. Der Scroll-Snap-Bereich wird bestimmt, indem die transformierte Randbox genommen, die rechteckige Begrenzungsbox (Achsen-ausgerichtet im Koordinatenraum des Scroll-Containers) 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-inline = 
  <length>{1,2}

Beispiele

Einfache 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, bei denen der zweite und dritte Block einrasten, nahe, aber nicht ganz am rechten Rand jedes Blocks.

HTML

Das HTML, das die Blöcke darstellt, 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 durchgehen. Der äußere Container wird so gestylt:

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 wichtigsten Teile, die sich auf das Scroll-Snapping beziehen, sind overflow-x: scroll, was sicherstellt, dass der Inhalt scrollt und nicht verborgen wird, und scroll-snap-type: x mandatory, was vorgibt, dass das Scroll-Snapping entlang der horizontalen Achse erfolgen muss und das Scrollen immer an einem Snap-Punkt zum Stillstand kommen wird.

Die untergeordneten Elemente werden 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: end;
}

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

Der relevanteste Teil hier ist scroll-snap-align: end, welcher angibt, dass die rechten Ränder (die "Enden" entlang der x-Achse, in unserem Fall) die festgelegten Snap-Punkte sind.

Zuletzt spezifizieren wir die Scroll-Margen-Werte, ein anderer 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 über die mittleren Kindelemente das Scrollen auf 1rem außerhalb des Inline-Endrandes des zweiten <div> und 2rems außerhalb des Inline-Endrandes des dritten <div> einrastet.

Hinweis: Hier setzen wir scroll-margin sowohl am Start als auch am Ende der Inline-Achse (x in unserem Fall), aber nur der Endrand ist wirklich relevant. Es würde hier genauso gut funktionieren, nur eine Scroll-Marge an diesem einen Rand zu setzen, zum Beispiel 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