scroll-padding

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

Die scroll-padding Kurzschreibweise setzt das Scroll-Padding auf allen Seiten eines Elements gleichzeitig, ähnlich wie die padding-Eigenschaft das Padding eines Elements festlegt.

Probieren Sie es aus

scroll-padding: 0;

scroll-padding: 20px;

scroll-padding: 2em;

<section class="default-example" id="default-example">
  <div class="scroller" id="example-element">
    <div>1</div>
    <div>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;
}

Die Eigenschaften scroll-padding-* definieren Versätze für den optimalen Anzeigebereich des Scrollports: den Bereich, der als Zielregion verwendet wird, um Dinge im Sichtbereich des Benutzers zu positionieren. Dies ermöglicht es dem Autor, Bereiche des Scrollports auszuschließen, die durch andere Inhalte (wie fixierte Werkzeugleisten oder Seitenleisten) verdeckt sind, oder mehr Abstand zwischen einem anvisierten Element und den Rändern des Scrollports zu schaffen.

Zusammengesetzte Eigenschaften

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

Syntax

css
/* Keyword values */
scroll-padding: auto;

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

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

Werte

<length-percentage>

Ein innenliegender Versatz vom entsprechenden Rand des Scrollports, als gültige <length> oder ein <percentage>.

auto

Der Versatz wird vom User-Agent bestimmt. Dies ist im Allgemeinen 0px, aber der User-Agent ist frei, etwas anderes zu erkennen und anzuwenden, falls ein anderer Wert geeigneter ist.

Formale Definition

Anfangswertwie die jeweiligen Kurzschreibweisen:
Anwendbar aufScrollcontainer
VererbtNein
Prozentwerterelative to the scroll container's scrollport
Berechneter Wertwie die jeweiligen Kurzschreibweisen:
Animationstypby computed value type

Formale Syntax

scroll-padding = 
  [ auto | <length-percentage [0,∞]> ]{1,4}  

<length-percentage> = 
  <length>      |
  <percentage>

Spezifikationen

Specification
CSS Scroll Snap Module Level 1
# scroll-padding

Browser-Kompatibilität

Siehe auch