此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
scroll-padding
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2021年4月.
简写属性 scroll-padding 同时设置元素的所有滚动内边距,其赋值方式较为类似 padding 属性为元素内边距赋值的方式。
尝试一下
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: #fff;
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
scroll-snap-align: start;
}
.scroller > div:nth-child(even) {
background-color: #fff;
color: rebeccapurple;
}
scroll-padding-* 属性定义了滚动口的最优视区——用于在用户视野中放置内容的目标区域——的内边距。作者由此得以排除滚动口被其他内容(如固定定位的工具栏或侧边栏)所遮挡的区域,或在目标元素与滚动口的边之间留出更多余地。
属性构成
此属性为下列 CSS 属性的简写属性:
语法
css
/* 关键字值 */
scroll-padding: auto;
/* <length> 值 */
scroll-padding: 10px;
scroll-padding: 1em 0.5em 1em 1em;
scroll-padding: 10%;
/* 全局值 */
scroll-padding: inherit;
scroll-padding: initial;
scroll-padding: revert;
scroll-padding: revert-layer;
scroll-padding: unset;
取值
<length-percentage>-
滚动口对应边的内边距,为有效的长度(
<length>)或百分比(<percentage>)。 auto-
此内边距由用户代理所决定。此值通常为
0px,但用户代理可检测非零值是否更合理并另行处理。
形式定义
| 初始值 | 该简写所对应的每个属性:
|
|---|---|
| 适用元素 | scroll containers |
| 是否是继承属性 | 否 |
| Percentages | relative to the scroll container's scrollport |
| 计算值 | 该简写所对应的每个属性:
|
| 动画类型 | 按计算值的类型 |
形式语法
scroll-padding =
[ auto | <length-percentage [0,∞]> ] {1,4}
<length-percentage> =
<length> |
<percentage>
规范
| Specification |
|---|
| CSS Scroll Snap Module Level 1 # scroll-padding |
浏览器兼容性
Loading...