CSS scroll-padding-block 属性

❮ 上一个完整的 CSS 参考下一个 ❯

示例

将滚动填充设置为从容器到捕捉位置的 20px，在块方向上

div {
scroll-padding-block: 20px;
}

自己试一试 »

更多“自己试一试”示例如下。

定义和用法

scroll-padding-block 属性指定从容器到子元素捕捉位置的块方向距离。

这意味着当你停止滚动时，滚动将快速调整并在捕捉位置和容器之间指定的块方向距离处停止。

**块方向**是指与现有行位置相比，下一行的位置，这也是 CSS display: block; 标签（如 <p> 和 <div> 标签）在页面上的布局方式。块方向取决于书写语言，例如蒙古语，其中新行从左到右排列，因此块方向从左到右，而英语页面则具有向下块方向。块方向可以使用 CSS 属性 writing-mode 定义。

**捕捉位置**是子元素上的位置，当您停止滚动时，它会在容器中捕捉到位。

**注意：**此属性仅在 scroll-snap-align 属性针对块方向设置为 'start' 或 'end' 时才起作用。

scroll-padding-block 属性是以下属性的简写属性

scroll-padding-block 属性的值可以通过不同的方式设置

如果 scroll-padding-block 属性有两个值

scroll-padding-block: 10px 50px;
- 开始处的距离为 10px
- 结束处的距离为 50px

如果 scroll-padding-block 属性有一个值

scroll-padding-block: 10px;
- 开始和结束处的距离为 10px

要查看 scroll-padding-block 属性的效果，必须在子元素上设置 scroll-snap-align 属性，并且必须在父元素上设置 scroll-padding-block 和 scroll-snap-type 属性。

CSS scroll-padding-block 和 scroll-padding-inline 属性与 CSS 属性 scroll-padding-top、scroll-padding-bottom、scroll-padding-left 和 scroll-padding-right 非常相似，但是 scroll-padding-block 和 scroll-padding-inline 属性取决于块和内联方向。

默认值	auto
继承	否
可动画	否。了解有关可动画的信息
版本	CSS3
JavaScript 语法	object.style.scrollPaddingBlock="20px" 试一试

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

属性
scroll-padding-block	69.0	79.0	68.0	15.0	56.0

CSS 语法

scroll-padding-block: auto|value|initial|inherit;

属性值

值	描述
auto	默认值。浏览器计算填充
长度	以 px、pt、cm 等指定 scroll-padding-block。不允许使用负值。了解有关长度单位的信息
%	以包含元素宽度的百分比指定填充
initial	将此属性设置为其默认值。了解有关initial的信息
inherit	从其父元素继承此属性。了解有关inherit的信息