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 Shorthand-Eigenschaft legt die Scroll-Padding auf allen Seiten eines Elements gleichzeitig fest, ähnlich wie die padding-Eigenschaft dies für das Padding eines Elements tut.

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: #fff;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
}

.scroller > div:nth-child(even) {
  background-color: #fff;
  color: rebeccapurple;
}

Die scroll-padding-*-Eigenschaften definieren Offsets für die optimale Anzeigeregion des Scrollport: die Region, die als Zielregion verwendet wird, um Dinge in den Blick des Benutzers zu rücken. Dies ermöglicht es dem Autor, Regionen des Scrollport auszuschließen, die durch andere Inhalte verdeckt sind (wie fest positionierte Werkzeugleisten oder Seitenleisten), oder um mehr Abstand zwischen einem fokussierten Element und den Rändern des Scrollport zu schaffen.

Zusammengesetzte Eigenschaften

Diese Eigenschaft ist eine Shorthand-Eigenschaft 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 inneres Offset vom entsprechenden Rand des Scrollport, als gültige <length> oder als <percentage>.

auto

Das Offset wird vom Benutzeragenten bestimmt. Dies ist in der Regel 0px, aber der Benutzeragent kann auch etwas anderes erkennen und tun, wenn ein anderer Wert mehr geeignet 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