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 scroll-padding Kurzform-Eigenschaft setzt die Scroll-Abstände auf allen Seiten eines Elements gleichzeitig. Sie legt Versätze fest, die den optimalen Anzeigebereich eines Scrollport innerhalb eines Scroll-Containers 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;
}
Zu den Bestandteilen gehörende 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 Versatz vom entsprechenden Rand des Scrollports, als gültige
<length>oder<percentage>. auto-
Der Versatz wird vom Benutzeragenten bestimmt. Dieser wird in der Regel
0pxsein, aber der Benutzeragent kann auch einen anderen Wert verwenden, wenn ein Wert ungleich null 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 dieser Reihenfolge setzt und somit den oberen, rechten, unteren und linken Scroll-Abstand eines Scroll-Containers festlegt.
Nützlich beim Erstellen von Scroll-Snap-Containern ermöglicht die scroll-padding-Eigenschaft das Festlegen von Versätzen für den optimalen Anzeigebereich des Scrollports: der Bereich, der als Zielregion dient, um Elemente für den Benutzer sichtbar zu platzieren. Dies erlaubt es Ihnen, Einrückungen im Scrollport zu schaffen, um Platz für Objekte zu machen, die den Inhalt verdecken könnten, wie z.B. fest positionierte Werkzeugleisten oder Seitenleisten, oder um mehr Abstand zwischen einem fokussierten Element und den Rändern des Scrollports zu schaffen.
Obwohl in dem CSS scroll-snap-Modul definiert, gilt diese Eigenschaft für alle Scroll-Container, 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 |