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-Shorthand-Eigenschaft scroll-padding legt den Scroll-Padding auf allen Seiten eines Elements gleichzeitig fest. Sie gibt Versätze an, die den optimalen Sichtbereich eines Scrollports 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;
}
Bestandteileigenschaften
Diese Eigenschaft ist eine Shorthand 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 von der entsprechenden Kante des Scrollports, als gültiges
<length>oder<percentage>. auto-
Der Versatz wird durch den User-Agent bestimmt. Im Allgemeinen ist dies
0px, aber der User-Agent kann erkennen und etwas anderes tun, wenn ein Wert ungleich null angemessener ist.
Beschreibung
Die Eigenschaft scroll-padding ist eine Shorthand, die scroll-padding-top, scroll-padding-right, scroll-padding-bottom und scroll-padding-left in dieser Reihenfolge festlegt und damit jeweils den oberen, rechten, unteren und linken Scroll-Padding eines Scroll-Containers setzt.
Die Eigenschaft scroll-padding ist beim Erstellen von Scroll-Snap-Containern nützlich und ermöglicht das Definieren von Versätzen für den optimalen Sichtbereich des Scrollports: den Bereich, der als Zielbereich verwendet wird, um Elemente für Benutzerinnen und Benutzer sichtbar zu platzieren. Dadurch können Sie Einzüge im Scrollport erstellen, um Platz für Objekte zu schaffen, die den Inhalt verdecken könnten, etwa Toolbars oder Sidebars mit fester Positionierung, oder um mehr Abstand zwischen einem anvisierten Element und den Kanten des Scrollports zu schaffen.
Obwohl diese Eigenschaft im Modul CSS scroll snap definiert ist, gilt sie für alle Scroll-Container, unabhängig vom Wert der Eigenschaft scroll-snap-type.
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>
Beispiele
Verhindern, dass Inhalt von einem festen Header verdeckt wird
Ein häufiger Anwendungsfall für scroll-padding besteht darin, zu verhindern, dass scrollender Inhalt von einem Header mit fester Positionierung verdeckt wird. Dieses Beispiel zeigt, wie scroll-padding hierfür verwendet wird.
HTML
Der Header enthält Links zu drei Abschnitten auf der Seite.
<header>
<nav>
<a href="#section-1">Section 1</a>
<a href="#section-2">Section 2</a>
<a href="#section-3">Section 3</a>
</nav>
</header>
<main>
<section id="section-1">
<h2>Section 1</h2>
<p>Use the links in the header to jump to another section.</p>
</section>
<section id="section-2">
<h2>Section 2</h2>
<p>This heading remains visible below the fixed header.</p>
</section>
<section id="section-3">
<h2>Section 3</h2>
<p>This heading also remains visible below the fixed header.</p>
</section>
</main>
CSS
Der Header ist oben im Viewport fixiert und 60px hoch. Wir setzen scroll-padding auf dem Wurzelelement, um beim Scrollen zu einem Abschnitt 60px am oberen Rand des Viewports zu reservieren, ohne Versatz an den anderen Seiten.
html {
--navbar-height: 60px;
scroll-padding: var(--navbar-height) 0 0;
scroll-behavior: smooth;
}
header {
position: fixed;
top: 0;
height: var(--navbar-height);
width: 100%;
}
Wir fügen dem Hauptinhalt Padding hinzu, damit der erste Abschnitt beim initialen Laden unterhalb des Headers beginnt.
main {
padding-top: var(--navbar-height);
}
Ergebnis
Klicken Sie auf die Links im Header, um zwischen den Abschnitten zu springen. Jeder Abschnitt erscheint unterhalb des Headers, sodass seine Überschrift sichtbar bleibt. Öffnen Sie dieses Beispiel im Playground, entfernen Sie die Zeile scroll-padding und klicken Sie erneut auf die Links, um zu sehen, wie der Header die Überschriften verdeckt.
Spezifikationen
| Spezifikation |
|---|
| CSS Scroll Snap Module Level 1 # scroll-padding |