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

Die Eigenschaft scroll-margin-inline-end definiert den Rand des Scroll-Snap-Bereichs am Ende der Inline-Dimension, der verwendet wird, um dieses Box-Element zum Snapport zu schnappen. Der Scroll-Snap-Bereich wird ermittelt, indem der transformierte Rahmen genommen, sein rechteckiges Begrenzungsfeld (achsenbündig im Koordinatenraum des Scroll-Containers) gefunden 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: #fff;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: end;
}

.scroller > div:nth-child(even) {
  background-color: #fff;
  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>

Eine Ausdehnung vom Inline-Endrand des Scroll-Containers.

Formale Definition

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

Formale Syntax

scroll-margin-inline-end = 
  <length>

Beispiele

Grundlegende Demonstration

Dieses Beispiel implementiert etwas sehr Ähnliches wie das interaktive Beispiel oben, jedoch erklären wir Ihnen hier, wie es implementiert wird.

Ziel ist es, vier horizontal scrollbare Blöcke zu erstellen, von denen der zweite und dritte einschnappen, in der Nähe, aber nicht ganz am rechten Rand 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 an. Der äußere Container ist wie folgt 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 Hauptteile, die für das Scroll-Snapping relevant sind, sind overflow-x: scroll, das sicherstellt, dass die Inhalte scrollen und nicht ausgeblendet werden, und scroll-snap-type: x mandatory, welches vorgibt, dass das Scroll-Snapping entlang der horizontalen Achse erfolgen muss und das Scrolling immer an einem Snap-Punkt zum Halten kommt.

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

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

Der wichtigste Teil hier ist scroll-snap-align: end, welches angibt, dass die rechten Kanten (die "Enden" 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-end: 1rem;
}

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

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

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