scroll-padding-inline-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-inline-end definiert die Offsets für die Endkante in der Inline-Dimension des optimalen Betrachtungsbereichs des Scrollports: der Bereich, der als Zielregion für das Platzieren von Elementen im Sichtfeld des Nutzers verwendet wird. Dadurch kann der Autor Bereiche des Scrollports ausschließen, die von anderen Inhalten verdeckt werden (wie fest positionierte Symbolleisten oder Seitenleisten), oder mehr Abstand zwischen einem anvisierten Element und den Rändern des Scrollports schaffen.
Probieren Sie es aus
scroll-padding-inline-end: 0;
scroll-padding-inline-end: 20px;
scroll-padding-inline-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 {
flex-wrap: wrap;
}
.default-example .info {
width: 100%;
padding: 0.5em 0;
font-size: 90%;
}
.scroller {
text-align: left;
width: 250px;
height: 250px;
overflow-x: scroll;
display: flex;
box-sizing: border-box;
border: 1px solid black;
scroll-snap-type: x mandatory;
}
.scroller > div {
flex: 0 0 250px;
width: 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-inline-end: auto;
/* <length> values */
scroll-padding-inline-end: 10px;
scroll-padding-inline-end: 1em;
scroll-padding-inline-end: 10%;
/* Global values */
scroll-padding-inline-end: inherit;
scroll-padding-inline-end: initial;
scroll-padding-inline-end: revert;
scroll-padding-inline-end: revert-layer;
scroll-padding-inline-end: unset;
Werte
<length-percentage>-
Ein inneres Offset von der Inline-Endkante des Scrollports, als gültige Länge oder Prozentangabe.
auto-
Das Offset wird vom User Agent bestimmt. Dies ist im Allgemeinen 0px, aber ein User Agent kann erkennen und anders handeln, wenn ein Wert ungleich null angemessener 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-inline-end =
auto |
<length-percentage [0,∞]>
<length-percentage> =
<length> |
<percentage>
Spezifikationen
| Specification |
|---|
| CSS Scroll Snap Module Level 1 # padding-longhands-logical |
Browser-Kompatibilität
Siehe auch
- CSS scroll snap-Modul
- Gut kontrolliertes Scrollen mit CSS scroll snap auf web.dev (2018)