試一試
scroll-padding-inline: 0;
scroll-padding-inline: 20px;
scroll-padding-inline: 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: start;
}
.scroller > div:nth-child(even) {
background-color: white;
color: rebeccapurple;
}
滾動內邊距屬性為滾動視口的“最佳檢視區域”定義了偏移量：該區域被用作目標區域，用於將內容放置在使用者的視野中。這允許作者排除滾動視口中被其他內容（如固定定位的工具欄或側邊欄）遮擋的區域，或者在目標元素和滾動視口邊緣之間留出更多喘息空間。
構成屬性
此屬性是以下 CSS 屬性的簡寫：
語法
css
/* Keyword values */
scroll-padding-inline: auto;
/* <length> values */
scroll-padding-inline: 10px;
scroll-padding-inline: 1em 0.5em;
scroll-padding-inline: 10%;
/* Global values */
scroll-padding-inline: inherit;
scroll-padding-inline: initial;
scroll-padding-inline: revert;
scroll-padding-inline: revert-layer;
scroll-padding-inline: unset;
值
<length-percentage>-
從滾動視口相應邊緣向內的偏移量，可以是有效的長度值或百分比。
auto-
偏移量由使用者代理決定。這通常是 0px，但如果非零值更合適，使用者代理可以檢測並執行其他操作。
正式定義
正式語法
scroll-padding-inline =
[ auto | <length-percentage [0,∞]> ]{1,2}
<length-percentage> =
<length> |
<percentage>
規範
| 規範 |
|---|
| CSS 滾動捕捉模組級別 1 # propdef-scroll-padding-inline |
瀏覽器相容性
載入中…