scroll-padding-block-end
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.
Die Eigenschaft scroll-padding-block-end definiert Abstände für die Endkante in der Blockdimension der optimalen Anzeigeregion des Scrollports: die Region, die als Zielregion zum Platzieren von Elementen in der Benutzeransicht genutzt wird. Dies ermöglicht es dem Autor, Bereiche des Scrollports, die durch andere Inhalte (wie z. B. fest positionierte Werkzeugleisten oder Seitenleisten) verdeckt sind, auszuschließen oder mehr Abstand zwischen einem gezielten Element und den Kanten des Scrollports zu schaffen.
Probieren Sie es aus
scroll-padding-block-end: 0;
scroll-padding-block-end: 20px;
scroll-padding-block-end: 2em;
<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: end;
}
.scroller > div:nth-child(even) {
background-color: white;
color: rebeccapurple;
}
Syntax
/* Keyword values */
scroll-padding-block-end: auto;
/* <length> values */
scroll-padding-block-end: 10px;
scroll-padding-block-end: 1em;
scroll-padding-block-end: 10%;
/* Global values */
scroll-padding-block-end: inherit;
scroll-padding-block-end: initial;
scroll-padding-block-end: revert;
scroll-padding-block-end: revert-layer;
scroll-padding-block-end: unset;
Werte
<length-percentage>-
Ein innerer Abstand von der Endkante des Blocks des Scrollports, als gültige Länge oder Prozentsatz.
auto-
Der Abstand wird durch den User-Agent bestimmt. Dies wird im Allgemeinen 0px sein, aber ein User-Agent kann etwas anderes erkennen und tun, wenn ein Wert ungleich null passender ist.
Formale Definition
| Anfangswert | auto |
|---|---|
| Anwendbar auf | Scrollcontainer |
| Vererbt | Nein |
| Prozentwerte | relative to the scroll container's scrollport |
| Berechneter Wert | wie angegeben |
| Animationstyp | by computed value type |
Formale Syntax
scroll-padding-block-end =
auto |
<length-percentage [0,∞]>
<length-percentage> =
<length> |
<percentage>
Spezifikationen
| Specification |
|---|
| CSS Scroll Snap Module Level 1 # padding-longhands-logical |