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 setzt den Scroll-Abstand auf allen Seiten eines Elements gleichzeitig, ähnlich wie die padding-Eigenschaft den Abstand 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 scroll-padding-*-Eigenschaften definieren Abstände für den optimalen Anzeigebereich des Scroll-Containers: den Bereich, der als Zielregion verwendet wird, um Elemente in den Blick des Benutzers zu bringen. Dies ermöglicht es dem Autor, Bereiche des Scroll-Containers auszuschließen, die durch anderen Inhalt (wie fest positionierte Werkzeugleisten oder Seitenleisten) verdeckt sind, oder mehr Raum zwischen einem anvisierten Element und den Rändern des Scroll-Containers zu schaffen.
Zusätzliche Eigenschaften
Diese Eigenschaft ist eine Kurzform 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 nach innen gerichteter Abstand von der entsprechenden Kante des Scroll-Containers, als gültige
<length>oder<percentage>. auto-
Der Abstand wird vom Benutzeragenten bestimmt. In der Regel wird dies
0pxsein, aber der Benutzeragent kann auch etwas anderes tun, wenn ein nicht-Null-Wert angemessener ist.
Formale Definition
| Anfangswert | 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
scroll-padding =
[ auto | <length-percentage [0,∞]> ]{1,4}
<length-percentage> =
<length> |
<percentage>
Spezifikationen
| Specification |
|---|
| CSS Scroll Snap Module Level 1 # scroll-padding |