CSS scroll-padding 属性

将容器到捕捉位置的滚动填充设置为 20px：

div {
scroll-padding: 20px;
}

下面有更多 "亲自试一试" 示例。

定义和用法

这个scroll-padding属性指定从容器到子元素的捕捉位置的距离。

这意味着当您停止滚动时，滚动将快速调整并停止在从容器到焦点子元素的捕捉位置的指定距离处。

捕捉位置是当您停止滚动时子元素在容器中卡入到位的位置。

笔记：在上面的示例中，在所有侧面都设置了滚动填充，但只有顶部的滚动填充会更改滚动行为，因为滚动对齐对齐设置为"start"。

这个scroll-paddingproperty 是以下属性的简写属性：

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

如果滚动填充属性有四个值：

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

如果滚动填充属性有两个值：

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

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

默认值：	汽车
遗传：	不
可动画：	不。阅读可动画的
版本：	CSS3
JavaScript 语法：	对象.style.scrollPadding="20px"尝试一下

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

Property
scroll-padding	69.0	79.0	68.0	14.1	56.0

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

Value	Description
auto	Default value. The browser calculates the padding
length	Specifies scroll-padding in px, pt, cm, etc. Negative values are not allowed. Read about length units
%	Specifies the padding in percent of the width of the containing element
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit