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

Bestandeigenschaften

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 Überstand von der entsprechenden Kante des Scroll-Containers.

Beschreibung

Sie können den Effekt von scroll-margin sehen, indem Sie zu einem Punkt zwischen zwei der "Seiten" des Inhalts 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.

Die scroll-margin-Werte stellen somit Überstände dar, die den Bereich für das Scroll-Snap definieren, der verwendet wird, um diese Box an den Snapport zu snaippen. Der Snap-Bereich wird bestimmt, indem man die transformierte Rahmenbox nimmt, ihre rechteckige Begrenzungsbox im Koordinatenraum des Scroll-Containers findet und die angegebenen Überstände hinzufügt.

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 ist.

Das Ziel hier ist es, vier horizontal scrollende Blöcke zu erstellen, von denen der zweite und der dritte fast, aber nicht ganz links am Block einrasten.

HTML

Das HTML enthält einen Scroller mit vier Kindelementen:

<div class="scroller">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

CSS

Gehen wir den CSS-Code durch. Der äußere Container ist folgendermaßen gestaltet:

.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 die Inhalte scrollen und nicht versteckt werden, und scroll-snap-type: x mandatory, was bestimmt, dass das Scroll-Snapping entlang der horizontalen Achse erfolgen muss und das Scrollen immer an einem Snap-Punkt endet.

Die Kindelemente sind folgendermaßen gestaltet:

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

Zuletzt geben wir die Scroll-Margin-Werte an, 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 an den mittleren Kindelementen vorbei das Scrollen um 1rem außerhalb der linken Kante des zweiten <div> und 2rems außerhalb der linken Kante des dritten <div> einrastet.

Ergebnis

Versuchen Sie es selbst:

Spezifikationen

Browser-Kompatibilität

Siehe auch

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