1. Web
  2. CSS
  3. Reference
  4. Properties
  5. scroll-margin-inline-start

Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

scroll-margin-inline-start CSS property

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2021 browserübergreifend verfügbar.

Die Eigenschaft scroll-margin-inline-start definiert den Rand des Scroll-Snap-Bereichs am Anfang der Inline-Dimension, der verwendet wird, um dieses Feld an den snapport anzuschnappen. Der Scroll-Snap-Bereich wird durch das Transformieren des Randrahmens ermittelt, indem seine rechteckige Begrenzungsbox (achsenparallel im Koordinatenraum des Scrollcontainers) gefunden wird und anschließend die angegebenen Ausstöße 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 Ausstoß von der Inline-Startkante des Scrollcontainers.

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, mit dem Unterschied, dass hier erklärt wird, wie es implementiert ist.

Das Ziel hier ist es, vier horizontal scrollende Blöcke zu erstellen, von denen der zweite und dritte einrasten, nahe, aber nicht ganz an der linken Seite jedes Blocks.

HTML

Das HTML beinhaltet einen Scroller mit vier Kindern:

html
<div class="scroller">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

CSS

Schauen wir uns das CSS genauer an. Der äußere Container ist 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 Hauptbestandteile, 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 Scrollen entlang der horizontalen Achse einrasten muss und das Scrollen immer auf einem Snap-Punkt endet.

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

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

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

Zum Schluss geben wir die Scrollrand-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 vorbei das Scrollen zu 1rem außerhalb der Inline-Startkante des zweiten <div> und 2rem außerhalb der Inline-Startkante des dritten <div> einrastet.

Ergebnis

Probieren Sie es selbst aus:

Spezifikationen

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

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.
Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden