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 January 2020.

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

Probieren Sie es aus

Die scroll-padding-* Eigenschaften definieren Versätze für den optimalen Ansichtsbereich des Scrollbereichs: den Bereich, der als Zielregion verwendet wird, um Dinge in die Sicht des Benutzers zu bringen. Dies ermöglicht es dem Autor, Bereiche des Scrollbereichs auszuschließen, die durch andere Inhalte (wie fest positionierte Werkzeugleisten oder Seitenleisten) verdeckt werden, oder zusätzlichen Abstand zwischen einem Ziel-Element und den Rändern des Scrollbereichs zu schaffen.

Bestandteile der Eigenschaften

Diese Eigenschaft ist eine Kurzschreibweise 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 Innenabstand vom entsprechenden Rand des Scrollbereichs, entweder als gültige <length> oder als <percentage>.

auto

Der Versatz wird durch den User-Agent bestimmt. Dies ist im Allgemeinen 0px, aber der User-Agent kann auch eine andere Entscheidung treffen, wenn ein anderer Wert angemessener ist.

Formale Definition

Initialer Wertwie 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

BCD tables only load in the browser

Siehe auch