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
/* 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 Wert | wie die jeweiligen Kurzschreibweisen:
|
---|---|
Anwendbar auf | Scrollcontainer |
Vererbt | Nein |
Prozentwerte | relative to the scroll container's scrollport |
Berechneter Wert | wie die jeweiligen Kurzschreibweisen:
|
Animationstyp | by computed value type |
Formale Syntax
Spezifikationen
Specification |
---|
CSS Scroll Snap Module Level 1 # scroll-padding |
Browser-Kompatibilität
BCD tables only load in the browser