Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
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.
Diescroll-paddingKurzschreibweise legt den Scroll-Abstand auf allen Seiten eines Elements gleichzeitig fest. Sie gibt Versätze an, die den optimalen Anzeigebereich eines Scrollports innerhalb einesScrollcontainers definieren.
Probieren Sie es aus
scroll-padding: 0;scroll-padding: 20px;scroll-padding: 20%;<section> <div> <div>1</div> <div>2</div> <div>3</div> </div> <div>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>.autoDer 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
Diescroll-padding-Eigenschaft ist eine Kurzform, diescroll-padding-top,scroll-padding-right,scroll-padding-bottom undscroll-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 diescroll-padding-Eigenschaft die Definition von Versätzen für denoptimalen 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 imCSS Scroll Snap-Modul definiert ist, gilt diese Eigenschaft für alle Scrollcontainer, unabhängig vom Wert derscroll-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 |