CSS scroll-padding-inline-start 属性

示例

将内联方向的滚动填充设置为从容器开始到捕捉位置的 20px：

div {
scroll-padding-inline-start: 20px;
}

亲自试一试 »

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

定义和用法

这个scroll-padding-inline-start属性指定内联方向上从容器的开头到子元素上的捕捉位置的距离。

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

内联方向是与一行中现有字符的位置相比下一个字符的放置位置，这也是 CSS 标签的方式display: inline;像 <a> 和 <strong> 标签一样布置在文本中。内联方向取决于书面语言，即阿拉伯语，其中新字符从右到左布局，这使得内联方向从右到左，而英语页面具有从左到右的内联方向。内联方向可以使用 CSS 属性定义direction和writing-mode。

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

笔记：仅当内联方向的scroll-snap-align 属性设置为“start”时，此属性才有效。

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

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

浏览器支持

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

Property
scroll-padding-inline-start	69.0	79.0	68.0	15.0	56.0

CSS 语法

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

属性值

Value	Description
auto	Default value. The browser calculates the padding
length	Specifies scroll-padding-inline-start 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