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 September 2021.

Die scroll-margin-inline Kurzschreibweise setzt die Scroll-Margen eines Elements in der Inline-Dimension.

Probieren Sie es aus

scroll-margin-inline: 0;

scroll-margin-inline: 40px 20px;

scroll-margin-inline: 4em 0;

scroll-margin-inline: 0px 3em;

<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 {
  flex-wrap: wrap;
}

.default-example .info {
  width: 100%;
  padding: 0.5em 0;
  font-size: 90%;
}

.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;
}

.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: end;
}

.scroller > div:nth-child(even) {
  background-color: white;
  color: rebeccapurple;
}

Bestandteilende Eigenschaften

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 Vorsprung vom entsprechenden Rand des Scroll-Containers.

Beschreibung

Die Werte von Scroll-Margen stehen für Vorsprünge, die den Scroll-Snap-Bereich definieren, der verwendet wird, um dieses Feld an den Snapport zu fangen. Der Scroll-Snap-Bereich wird durch die transformierte Begrenzungsbox bestimmt, indem die rechteckige Begrenzungsbox (achsenbündig im Koordinatenraum des Scroll-Containers) gefunden und anschließend die angegebenen Vorsprünge hinzugefügt werden.

Formale Definition

Anfangswertwie 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 obige interaktive Beispiel, außer dass wir Ihnen hier erklären, wie es implementiert wird.

Das Ziel ist es, vier horizontal scrollbare Blöcke zu erstellen, wobei der zweite und dritte Block an Ort und Stelle einrasten, nahe aber nicht ganz am rechten Rand jedes Blocks.

HTML

Das HTML enthält einen Scroller mit vier Kindern:

html
<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 wird folgendermaßen gestylt:

css
.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, was sicherstellt, dass die Inhalte scrollen und nicht verborgen werden, und scroll-snap-type: x mandatory, das vorgibt, dass das Scroll-Snapping entlang der horizontalen Achse erfolgen muss und das Scrollen immer auf einem Snap-Punkt zur Ruhe kommen wird.

Die Kindelemente werden wie folgt gestylt:

css
.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: end;
}

.scroller > div:nth-child(2n) {
  background-color: white;
  color: rebeccapurple;
}

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

Zuletzt spezifizieren wir die Werte der Scroll-Margen, unterschiedliche 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 das Scrollen 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 auf den Start und das Ende der Inline-Achse (x in unserem Fall), aber nur der Endrand ist wirklich relevant. Es würde genauso gut funktionieren, hier nur eine Scroll-Marge auf diesen einen Rand zu setzen, zum Beispiel mit scroll-margin-inline: 0 1rem, oder scroll-margin-inline-end: 1rem.

Ergebnis

Probieren Sie es selbst:

Spezifikationen

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

Browser-Kompatibilität

Siehe auch