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 Kurzschreibweise legt den Scroll-Abstand auf allen Seiten eines Elements gleichzeitig fest. Sie gibt Versätze an, die den optimalen Anzeigebereich eines Scrollports innerhalb eines Scrollcontainers definieren.
Probieren Sie es aus
scroll-padding: 0;
scroll-padding: 20px;
scroll-padding: 20%;
<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;
}
Zusammengesetzte 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 innerer Versatz von der entsprechenden Kante des Scrollports, 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 einen anderen Wert wählen, wenn dieser passender ist.
Beschreibung
Die scroll-padding-Eigenschaft ist eine Kurzform, die scroll-padding-top, scroll-padding-right, scroll-padding-bottom und scroll-padding-left in der Reihenfolge setzt und damit den oberen, rechten, unteren und linken Scroll-Abstand eines Scrollcontainers festlegt.
Nützlich bei der Erstellung von Scroll-Snap-Containern ermöglicht die scroll-padding-Eigenschaft die Definition von Versätzen für den optimalen Anzeigebereich des Scrollports: der Bereich, der als Zielregion für die Platzierung von Elementen zur Ansicht des Benutzers verwendet wird. Dies erlaubt es, Einzüge im Scrollport zu erstellen, um Platz für Objekte zu schaffen, die den Inhalt verdecken könnten, wie z.B. fixierte Werkzeugleisten oder Seitenleisten, oder um mehr Abstand zwischen einem anvisierten Element und den Rändern des Scrollports zu schaffen.
Obwohl sie im CSS Scroll Snap-Modul definiert ist, gilt diese Eigenschaft für alle Scrollcontainer, unabhängig vom Wert der scroll-snap-type-Eigenschaft.
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 |