scroll-margin-inline-start

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 Eigenschaft scroll-margin-inline-start definiert den Rand des Scroll-Snap-Bereichs am Anfang der Inline-Dimension, die verwendet wird, um dieses Element an den Snapport zu schnappen. Der Scroll-Snap-Bereich wird ermittelt, indem die transformierte Randbox genommen wird, ihre rechteckige Begrenzungsbox (achsenausgerichtet im Koordinatenraum des Scroll-Containers) gefunden wird, und dann die angegebenen Überstände hinzugefügt werden.

Probieren Sie es aus

scroll-margin-inline-start: 0;

scroll-margin-inline-start: 20px;

scroll-margin-inline-start: 2em;

<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: start;
}

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

Syntax

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

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

Werte

<length>

Ein Überstand von der Inline-Startkante des Scroll-Containers.

Formale Definition

Anfangswert0
Anwendbar aufalle Elemente
VererbtNein
Berechneter Wertwie angegeben
Animationstypby computed value type

Formale Syntax

scroll-margin-inline-start = 
  <length>

Beispiele

Grundlegende Demonstration

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

Das Ziel hier ist, vier horizontal scrollbare Blöcke zu erzeugen, wobei der zweite und dritte Block in Position einrasten, nahe, aber nicht ganz links von jedem Block.

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

Lassen Sie uns das CSS durchgehen. 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 black;
  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 ausgeblendet wird, und scroll-snap-type: x mandatory, das vorschreibt, dass ein Scroll-Snap entlang der Horizontalachse erfolgen muss, und das Scrollen immer auf einem Snap-Punkt zum Stehen kommt.

Die Kind-Elemente sind wie folgt gestaltet:

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: start;
}

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

Der relevanteste Teil hier ist scroll-snap-align: start, welches spezifiziert, dass die linken Kanten (die "Starts" entlang der x-Achse in unserem Fall) die ausgewiesenen Snap-Punkte sind.

Zuletzt spezifizieren wir die Scroll-Margin-Werte, unterschiedliche für das zweite und dritte Kindelement:

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

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

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

Ergebnis

Probieren Sie es selbst:

Spezifikationen

Specification
CSS Scroll Snap Module Level 1
# margin-longhands-logical

Browser-Kompatibilität

Siehe auch