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

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-end 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-end definiert den Rand des Scroll-Snap-Bereichs am Ende der Inline-Dimension, der verwendet wird, um dieses Box-Element in den Snapport einzurasten. Der Scroll-Snap-Bereich wird bestimmt, indem die transformierte Randbox genommen wird, deren rechteckige Begrenzung (achsenbezogen im Koordinatenraum des Scroll-Containers) gefunden und dann die angegebenen Abstände 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 Ausmaß 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. Allerdings werden wir hier erklären, wie es implementiert wird.

Das Ziel ist es, vier horizontal scrollbare Blöcke zu erstellen, wobei der zweite und dritte Block einrasten, nahe, aber nicht ganz an der rechten Seite jedes Blocks.

HTML

Das HTML umfasst 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 den CSS durchgehen. Der äußere Container ist wie folgt 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 Hauptpunkte, die für das Scroll-Snapping relevant sind, sind overflow-x: scroll, was sicherstellt, dass der Inhalt scrollen kann und nicht verborgen wird, und scroll-snap-type: x mandatory, welches vorschreibt, dass das Scroll-Snapping entlang der horizontalen Achse stattfinden muss, und dass das Scrolling immer an einem Snap-Punkt zur Ruhe kommen wird.

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, was angibt, dass die rechten Ränder ("Enden" entlang der x-Achse, in unserem Fall) die vorgesehenen Snap-Punkte sind.

Zuletzt geben wir die Scroll-Margenwerte an, einen unterschiedlichen 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 entlang das Scrolling 1rem außerhalb des Inline-Endrandes des zweiten <div> und 2rems außerhalb des Inline-Endrandes 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