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 January 2020.

Die Eigenschaft scroll-margin-inline-start definiert den Rand des Scroll-Snap-Bereichs am Start der Inline-Dimension, die verwendet wird, um dieses Box-Element an den Snapport zu schnappen. Der Scroll-Snap-Bereich wird ermittelt, indem die transformierte Border-Box genommen wird, um das rechteckige Begrenzungsrechteck (achsenparallel im Koordinatenraum des Scroll-Containers) zu finden, und dann die angegebenen Ausdehnungen hinzugefügt werden.

Probieren Sie es aus

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 Abstand vom Inline-Start-Rand des Scroll-Containers.

Formale Definition

Initialer Wert0
Anwendbar aufalle Elemente
VererbtNein
Berechneter Wertwie angegeben
Animationstypby computed value type

Formale Syntax

scroll-margin-inline-start = 
  <length>

Beispiele

Einfache Demonstration

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

Das Ziel hier ist, vier horizontal scrollende Blöcke zu erstellen, von denen der zweite und dritte einrasten, nahe, aber nicht ganz am linken 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-Code 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 #000;
  scroll-snap-type: x mandatory;
}

Die Hauptaspekte, 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, was vorschreibt, dass das Scroll-Snapping entlang der horizontalen Achse erfolgen muss und das Scrollen immer an einem Snap-Punkt stoppen wird.

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

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

Der wichtigste Teil hier ist scroll-snap-align: start, was festlegt, dass die linken Kanten (die "Starts" entlang der x-Achse, in unserem Fall) die vorgesehenen Snap-Punkte sind.

Zum Schluss geben wir die Scroll-Margin-Werte an, einen anderen 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, das Scrollen zu 1rem außerhalb des Inline-Start-Randes des zweiten <div>, und zu 2rems außerhalb des Inline-Start-Randes des dritten <div> einrastet.

Ergebnis

Probieren Sie es selbst aus:

Spezifikationen

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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch