“学习践行十九大 助力决胜全面小康——网络名人看辽宁”活动圆满结束
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 Vers?tze für die Endkante in der Inline-Dimension des optimalen Ansichtsbereichs des Scrollportals: der Bereich, der als Zielbereich für die Platzierung von Inhalten im Sichtfeld des Benutzers verwendet wird. Dies erm?glicht es dem Autor, Bereiche des Scrollportals auszuschlie?en, die von anderem Inhalt verdeckt werden (wie z. B. fest positionierte Werkzeugleisten oder Seitenleisten), oder mehr Abstand zwischen einem gezielten Element und den R?ndern des Scrollportals zu 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: #fff;
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
scroll-snap-align: end;
}
.scroller > div:nth-child(even) {
background-color: #fff;
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 Inwards-Versatz von der Inline-Endkante des Scrollportals als gültige L?nge oder als Prozentsatz.
auto-
Der Versatz wird durch den User-Agent bestimmt. Dies ist im Allgemeinen 0px, aber ein User-Agent kann erkennen und etwas anderes tun, wenn ein anderer Wert 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 |