试一试
scroll-padding: 0;
scroll-padding: 20px;
scroll-padding: 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: start;
}
.scroller > div:nth-child(even) {
background-color: white;
color: rebeccapurple;
}
scroll-padding-* 属性定义了滚动视口“最佳可视区域”的偏移量：该区域用作将内容放置在用户视野中的目标区域。这允许作者排除滚动视口中被其他内容（例如固定定位的工具栏或侧边栏）遮挡的区域，或者在目标元素和滚动视口边缘之间留出更多喘息空间。
构成属性
此属性是以下 CSS 属性的简写：
语法
css
/* Keyword values */
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;
值
<length-percentage>-
从滚动视口的相应边缘向内偏移，以有效的
<length>或<percentage>表示。 auto-
偏移量由用户代理确定。这通常是
0px，但如果非零值更合适，用户代理可以自由检测并执行其他操作。
正式定义
| 初始值 | 作为简写中的每个属性
|
|---|---|
| 应用于 | 滚动容器 |
| 继承性 | 否 |
| 百分比 | 相对于滚动容器的滚动视口 |
| 计算值 | 作为简写中的每个属性
|
| 动画类型 | 按计算值类型 |
正式语法
scroll-padding =
[ auto | <length-percentage [0,∞]> ]{1,4}
<length-percentage> =
<length> |
<percentage>
规范
| 规范 |
|---|
| CSS 滚动捕捉模块级别 1 # scroll-padding |
浏览器兼容性
加载中…