CSS-Eigenschaft scroll-padding
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit April 2021 browserübergreifend verfügbar.
Die CSS-Abkürzungseigenschaft scroll-padding legt den Bildlaufabstand auf allen Seiten eines Elements gleichzeitig fest. Sie spezifiziert Versätze, die den optimalen Ansichtsbereich 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;
}
Teilweise Eigenschaften
Diese Eigenschaft ist eine Abkürzung 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 einwärts gerichteter Versatz von der entsprechenden Kante des Scrollports, als gültige
<length>oder<percentage>. auto-
Der Versatz wird vom User-Agent bestimmt. Im Allgemeinen wird dies
0pxsein, aber der User-Agent kann erkennen, dass ein anderer Wert angemessener ist, und entsprechend handeln.
Beschreibung
Die scroll-padding-Eigenschaft ist eine Abkürzung, die scroll-padding-top, scroll-padding-right, scroll-padding-bottom und scroll-padding-left in dieser Reihenfolge setzt. Sie legt den oberen, rechten, unteren und linken Bildlaufabstand eines Scrollcontainers fest.
Nützlich bei der Erstellung von Scroll-Snap-Containern ermöglicht die scroll-padding-Eigenschaft das Festlegen von Versätzen für den optimalen Ansichtsbereich des Scrollports: den Bereich, der als Zielbereich für die Platzierung von Elementen im Sichtfeld des Benutzers dient. Dies ermöglicht das Erstellen von Einzügen im Scrollport, um Platz für Objekte zu schaffen, die den Inhalt verdecken könnten, wie z.B. fest positionierte Werkzeugleisten oder Seitenleisten, oder um mehr Abstand zwischen einem anvisierten Element und den Rändern des Scrollports zu schaffen.
Während diese Eigenschaft im CSS-Scroll-Snap-Modul definiert ist, gilt sie 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
| Spezifikation |
|---|
| CSS Scroll Snap Module Level 1 # scroll-padding |