Proprietà CSS scroll-padding-left

Definizione e uso

scroll-padding-left Proprietà che specifica la distanza dal lato sinistro del contenitore alla posizione di adsorbimento dell'elemento.

La posizione di adsorbimento si riferisce alla posizione in cui l'elemento figlio si adatta nel contenitore quando la scorrimento si ferma.

La posizione di adsorbimento è determinata da scroll-snap-align proprietà impostate, ma potrebbe essere influenzata anche dalle proprietà CSS direction 和 writing-mode influenza.

Attenzione:Questa proprietà è valida solo quando la posizione di adsorbimento è impostata a sinistra dell'elemento figlio.

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

实例

例子 1

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

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

亲自试一试

例子 2：图片库

scroll-padding-left 属性可用于具有吸附行为的图片画廊，以将图片从固定元素后面推入视图中：

#container > img {
  scroll-padding-left: 30px;
}

亲自试一试

例子 3：在左侧设置滚动内边距

当在两个方向上都设置了吸附行为时，也可以在容器上设置 scroll-padding-left 属性。水平滚动到下一个元素以查看效果：

#container > div {
  scroll-padding-left: 30px;
}

亲自试一试

例子 4：吸附位置

要使 scroll-padding-left 属性生效，吸附位置必须设置在子元素的左侧。在此例中，direction 属性的值 'rtl' 将吸附位置从子元素的左侧更改为右侧。使用这样的代码时，scroll-padding-left 属性将不再起作用：

#container {
  direction: rtl;
  scroll-padding-left: 30px;
}
#container > div {
  scroll-snap-align: none start;
}

亲自试一试

CSS 语法

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

属性值

值 描述
auto 默认值。浏览器计算内边距。
length

以 px、pt、cm 等单位指定 scroll-padding-left。

不允许使用负值。请参阅：Unità CSS。
% 指定包含元素宽度的百分比作为内边距。
initial 将此属性设置为其默认值。参阅 initial。
inherit 从其父元素继承此属性。参阅 inherit。

技术细节

默认值： auto
继承性： 否
动画制作： 不支持。请参阅：动画相关属性。
版本： CSS3
JavaScript 语法： object.style.scrollPaddingLeft="20px"

浏览器支持

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

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

相关页面

Riferimento:Proprietà direction CSS

Riferimento:Proprietà CSS scroll-snap-align

Riferimento:Proprietà CSS scroll-snap-type

Riferimento:Proprietà CSS writing-mode