CSS scroll-padding 属性

定义和用法

scroll-padding 属性指定从容器到子元素吸附位置的距离。

这意味着，当你停止滚动时，滚动会快速调整并停止在距离容器到焦点子元素吸附位置的指定距离处。

吸附位置是指子元素在停止滚动时，其在容器中固定到位的位置。

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

• scroll-padding-top
• scroll-padding-bottom
• scroll-padding-left
• scroll-padding-right

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

如果 scroll-padding 属性有四个值：

scroll-padding: 15px 30px 60px 90px;

• 顶部距离为 15px
• 右侧距离为 30px
• 底部距离为 60px
• 左侧距离为 90px

如果 scroll-padding 属性有三个值：

scroll-padding: 15px 30px 60px;

• 顶部距离为 15px
• 左侧和右侧距离为 30px
• 底部距离为 60px

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

scroll-padding: 15px 30px;

• 顶部和底部距离为 15px
• 左侧和右侧距离为 30px

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

scroll-padding: 10px;

• 所有四个方向的距离均为 10px

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

注意：在下面的例子中，为所有边设置了滚动内边距，但由于 scroll-snap-align 设置为 "start"，因此只有顶部边的滚动内边距改变了滚动行为。

实例

例子 1

设置从容器到吸附位置的滚动内边距为 20px：

div {
  scroll-padding: 20px;
}

亲自试一试

例子 2：图片库

scroll-padding 属性可以在具有吸附行为的图片画廊中使用，以将图片推到固定元素下方：

#container {
  scroll-padding: 30px 0 0 0;
}

固定的顶部元素

亲自试一试

例子 3：设置底部和右侧的滚动内边距

scroll-padding 属性可以在容器的底部和右侧同时设置。水平和垂直滚动到下一个元素以查看效果：

#container {
  scroll-padding: 0 10px 30px 0;
}

亲自试一试

CSS 语法

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

属性值

技术细节

浏览器支持

表格中的数字表示首个完全支持该属性的浏览器版本。

相关页面

参考：CSS scroll-padding-bottom 属性

参考：CSS scroll-padding-left 属性

参考：CSS scroll-padding-right 属性

参考：CSS scroll-padding-top 属性

参考：CSS scroll-snap-align 属性

参考：CSS scroll-snap-type 属性