CSS scroll-padding-inline-start 属性

Definition and Usage

scroll-padding-inline-start attribute specifies the distance from the container starting position to the child element吸附位置 in the inline direction.

This means that when you stop scrolling, the scroll will quickly adjust and stop at the specified distance between the吸附位置 and the container.

The inline direction refers to the direction in which the next character is placed relative to the existing character in the line, which is also the layout method of tags with CSS display: inline; (such as <a> and <strong> tags) in text. The inline direction depends on the writing language, for example, the new characters in Arabic are arranged from right to left, so the inline direction is from right to left, while the inline direction on English pages is from left to right. The inline direction can be set through the CSS attribute direction at writing-mode Definition.

The吸附位置 refers to the position where the child element is吸附到位 in the container when you stop scrolling.

Note:This attribute is only set in the inline direction scroll-snap-align attribute is 'start' it takes effect.

to see scroll-padding-inline-start attribute effect, must be set on the child element scroll-snap-align attribute, and set it on the parent element scroll-padding-inline-start at scroll-snap-type 属性。

实例

例子 1

设置从容器的起始位置到吸附位置在行内方向上的滚动内边距为 20px：

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

亲自试一试

例子 2：图片库

scroll-padding-inline-start 属性可以在具有吸附行为的图片画廊中使用，以将图片从固定元素后面推出：

#container {
  scroll-padding-inline-start: 30px;
}

亲自试一试

例子 3

当容器元素的 writing-mode 属性值设置为 'vertical-rl' 时，行内方向上容器和子元素的起始位置从顶部移动到右侧。这会影响滚动吸附行为以及 scroll-padding-inline-start 属性的工作方式：

#container {
  scroll-padding-inline-start: 20px 0;
  writing-mode: vertical-rl;
}

亲自试一试

例子 4

当容器元素的 direction 属性值设置为 'rtl' 时，行内方向上容器和子元素的起始位置从右侧移动到左侧，而容器和子元素的结束位置从右侧移动到底部。这会影响滚动吸附行为以及 scroll-padding-inline 属性的工作方式：

#container {
  scroll-padding-inline-start: 20px;
  diretion: rtl;
}

亲自试一试

CSS 语法

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

属性值

技术细节

浏览器支持

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

相关页面

参考：CSS direction Ating katangian

参考：CSS scroll-snap-align 属性

参考：CSS scroll-snap-type 属性

参考：CSS writing-mode 属性