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-Kurzform-Eigenschaft setzt den Scrollabstand auf allen Seiten eines Elements gleichzeitig, ähnlich wie die padding-Eigenschaft den Abstand innerhalb eines Elements definiert.
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 Versätze für die optimale Anzeigeregion des Scrollportals: die Region, die als Zielregion dient, um Objekte in den Sichtbereich des Benutzers zu bringen. Dies ermöglicht es dem Autor, Bereiche des Scrollportals auszuschließen, die durch andere Inhalte (wie fixierte Werkzeugleisten oder Seitenleisten) verdeckt werden, oder um mehr Abstand zwischen einem anvisierten Element und den Rändern des Scrollportals zu schaffen.
Einzelne 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 in den Scrollport einwärts gerichteter Versatz als gültige
<length>oder ein<percentage>. auto-
Der Versatz wird durch den User-Agent bestimmt. Im Allgemeinen ist dies
0px, aber der User-Agent kann einen anderen Wert bestimmen, wenn ein nicht nullwertiger Wert passender 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 |
Browser-Kompatibilität
Loading…