scroll-margin CSS-Eigenschaft

Probieren Sie es aus

scroll-margin: 0;

scroll-margin: 20px;

scroll-margin: 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 .info {
  inline-size: 100%;
  padding: 0.5em 0;
  font-size: 90%;
  writing-mode: vertical-rl;
}

.scroller {
  text-align: left;
  height: 250px;
  width: 270px;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border: 1px solid black;
  scroll-snap-type: y mandatory;
}

.scroller > div {
  flex: 0 0 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;
}

Zusammengesetzte Eigenschaften

Diese Eigenschaft ist eine Shorthand für die folgenden CSS-Eigenschaften:

• scroll-margin-bottom
• scroll-margin-left
• scroll-margin-right
• scroll-margin-top

Syntax

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

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

Werte

<length>

Ein Abstand vom entsprechenden Rand des Scroll-Containers.

Beschreibung

Sie können die Wirkung von scroll-margin sehen, indem Sie zu einem Punkt zwischen zwei der "Seiten" des Beispiels scrollen. Der für scroll-margin angegebene Wert bestimmt, wie viel von der Seite, die sich hauptsächlich außerhalb des snapport befindet, sichtbar bleiben soll.

Daher stellen die scroll-margin-Werte Abstände dar, die den Scroll-Schnappbereich definieren, der verwendet wird, um dieses Feld zum Snapport zu snappen. Der Scroll-Schnappbereich wird bestimmt, indem die transformierte Borderbox verwendet, deren rechteckige Begrenzungsbox (achsenparallel im Koordinatenraum des Scroll-Containers) gefunden und dann die angegebenen Abstände hinzugefügt werden.

Formale Definition

Formale Syntax

scroll-margin = 
  <length>{1,4}  

Beispiele

Grundlegende Demonstration

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

Das Ziel hier ist es, vier horizontal scrollbare Blöcke zu erstellen, von denen der zweite und dritte in Position rasten, nahe, aber nicht ganz links von jedem Block.

HTML

Das HTML enthält einen Scroller mit vier Kindern:

<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 wird wie folgt gestylt:

.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 sich auf das Scroll-Snapping beziehen, sind overflow-x: scroll, was sicherstellt, dass die Inhalte scrollen und nicht verborgen werden, und scroll-snap-type: x mandatory, das vorschreibt, dass das Scroll-Snapping entlang der horizontalen Achse erfolgen muss und das Scrollen immer an einem Snap-Punkt zum Stillstand kommen wird.

Die Kindelemente werden wie folgt gestylt:

.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 wichtigste Teil hier ist scroll-snap-align: start, der angibt, dass die linken Kanten (die "Starts" entlang der x-Achse, in unserem Fall) die festgelegten Snap-Punkte sind.

Zum Schluss spezifizieren wir die Scroll-Margin-Werte, jeweils einen anderen für das zweite und dritte Kindelement:

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

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

Das bedeutet, dass beim Scrollen über die mittleren Kindelemente das Scrollen auf 1rem außerhalb der linken Kante des zweiten <div> und 2rems außerhalb der linken Kante des dritten <div> einrastet.

Ergebnis

Probieren Sie es selbst aus:

Spezifikationen

Browser-Kompatibilität

Siehe auch

• CSS scroll snap Modul
• Gut kontrolliertes Scrollen mit CSS scroll snap auf web.dev (2018)