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-Kurzschreibweise scroll-padding legt das 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 Kurzschreibweise für die folgenden CSS-Eigenschaften:
Syntax
/* Keyword value */
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ültiger
<length>oder<percentage>. auto-
Der Versatz wird durch den User-Agent bestimmt. Im Allgemeinen wird dies
0pxsein, aber der User-Agent kann erkennen und etwas anderes tun, wenn ein Wert ungleich null angemessener ist.
Beschreibung
Die Eigenschaft scroll-padding ist eine Kurzschreibweise, die scroll-padding-top, scroll-padding-right, scroll-padding-bottom und scroll-padding-left in dieser Reihenfolge festlegt und damit jeweils das obere, rechte, untere und linke Scroll-Padding eines Scroll-Containers setzt.
Die Eigenschaft scroll-padding ist nützlich beim Erstellen von Scroll-Snap-Containern und ermöglicht das Definieren von Versätzen für den optimalen Sichtbereich des Scrollports: den Bereich, der als Zielbereich verwendet wird, um Elemente im Sichtbereich der Benutzerin oder des Benutzers 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 zielgerichteten Element und den Kanten des Scrollports zu schaffen.
Obwohl sie im Modul CSS scroll snap definiert ist, gilt diese Eigenschaft 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 Inhalte durch einen festen Header verdeckt werden
Ein häufiger Anwendungsfall für scroll-padding besteht darin, zu verhindern, dass scrollende Inhalte durch einen Header mit fester Position verdeckt werden. Dieses Beispiel zeigt, wie Sie scroll-padding zu diesem Zweck verwenden.
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 am oberen Rand des Viewports fixiert und 60px hoch. Wir setzen scroll-padding auf dem Wurzelelement, um beim Scrollen zu einem Abschnitt am oberen Rand des Viewports 60px zu reservieren, ohne Versatz auf 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 anfänglichen 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 mit 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 |