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 an den Snapport zu snappen. Der Scroll-Snap-Bereich wird durch das transformierte Rand-Box bestimmt, indem sein rechteckiger Begrenzungsrahmen (achsenparallel im Koordinatenraum des Scroll-Containers) gefunden wird, und dann die angegebenen Erweiterungen hinzugefügt werden.

Probieren Sie es aus

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 Erweiterung von der Inline-Endkante 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

Einfache Demonstration

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

Das Ziel hier ist, vier horizontal scrollende Blöcke zu erstellen, von denen der zweite und dritte in Position schnappen, nahe, aber nicht ganz am rechten 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 durch das CSS gehen. Der äußere Container wird so 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, 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 auf einem Snap-Punkt endet.

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

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

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

Zum Schluss 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;
}

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

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