scroll-margin-inline-end

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-end definiert den Rand des Scroll-Snap-Bereichs am Ende der Inlinedimension, die dazu verwendet wird, dieses Box-Element an den Snapport zu schnappen. Der Scroll-Snap-Bereich wird bestimmt, indem das transformierte Border-Box-Element genommen, dessen rechteckige Begrenzungsbox (achsenparallel im Koordinatenraum des Scroll-Containers) ermittelt und dann die angegebenen Ausdehnungen hinzugefügt werden.

Probieren Sie es aus

scroll-margin-inline-end: 0;

scroll-margin-inline-end: 20px;

scroll-margin-inline-end: 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: end;
}

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

Syntax

css

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

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

Werte

<length>: Ein Abstand vom Ende der Inline-Kante des Scroll-Containers.

Formale Definition

Anfangswert	`0`
Anwendbar auf	alle Elemente
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	by computed value type

Formale Syntax

scroll-margin-inline-end = 
  <length>

Beispiele

Grundlegende Demonstration

Dieses Beispiel implementiert etwas, das dem interaktiven Beispiel oben sehr ähnlich ist, mit dem Unterschied, dass wir hier erklären, wie es implementiert ist.

Das Ziel hier ist, vier horizontal scrollbare Blöcke zu erstellen, von denen der zweite und dritte an eine Stelle schnappen, die nahe, aber nicht ganz rechts am Rand jedes Blocks ist.

HTML

Das HTML enthält einen Scroller mit vier Kindelementen:

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 verborgen wird, und scroll-snap-type: x mandatory, das vorgibt, dass das Scroll-Snapping entlang der horizontalen Achse erfolgen muss und das Scrollen immer an einem Snap-Punkt zum Stillstand kommt.

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

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

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

Schließlich spezifizieren wir die Scroll-Margin-Werte, einen anderen für das zweite und dritte Kindelement:

css

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

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

Dies bedeutet, dass beim Scrollen an den mittleren Kindelementen vorbei das Scrollen zu 1rem außerhalb der Inline-Endkante des zweiten <div> und 2rems außerhalb der Inline-Endkante des dritten <div> schnappt.

Ergebnis

Probieren Sie es selbst aus:

Spezifikationen

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

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden