CSS scroll-padding-right-Eigenschaft

Definition und Verwendung

scroll-padding-right Eigenschaft die Distanz von der rechten Seite des Behälters bis zum Anheftungsort des Kindelements spezifiziert.

Der Anheftungsort bezieht sich auf die Position, an der der Kindelement im Behälter anheftet, wenn das Scrollen gestoppt wird.

Anheftungsort durch scroll-snap-align Eigenschaftseinstellungen, kann aber auch von CSS-Eigenschaften direction 和 writing-mode Einfluss.

Hinweis:此属性仅在吸附位置设置在子元素右侧时有效。

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

实例

例子 1

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

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

亲自试一试

例子 2：图片库

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

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

亲自试一试

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

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

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

亲自试一试

例子 4：吸附位置

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

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

亲自试一试

CSS 语法

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

属性值

技术细节

浏览器支持

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

Verwandte Seiten

Referenz:CSS direction Eigenschaft

Referenz:CSS scroll-snap-align-Eigenschaft

Referenz:CSS scroll-snap-type-Eigenschaft

Referenz:CSS writing-mode Eigenschaft