CSS scroll-padding-bottom eigenschap

Definitie en gebruik

scroll-padding-bottom Eigenschap om de afstand van de onderkant van het container tot de vastheidspositie van het subelement te specificeren.

De vastheidspositie is de positie waarin een subelement in een container blijft hangen wanneer je het scrolleerbaar gebied stopzet. De vastheidspositie wordt bepaald door scroll-snap-align Eigenschapsinstellingen, maar kan ook worden beïnvloed door CSS-eigenschappen richting 和 writing-mode 的影响。

注意：此属性仅在吸附位置设置在子元素底部时才有效。

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

实例

例子 1

设置从容器底部到吸附位置的滚动填充为 20px：

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

亲自试一试

例子 2：图片库

在具有吸附行为的图片画廊中，可以使用 scroll-padding-bottom 属性将图片推到固定元素上方：

#container {
  scroll-padding-bottom: 30px;
}

亲自试一试

例子 3：设置底部滚动填充

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

#container {
  scroll-padding-bottom: 30px;
}

亲自试一试

例子 4：吸附位置

为了使 scroll-padding-bottom 属性生效，吸附位置必须设置在子元素的底部。在此示例中，writing-mode 属性将吸附位置从子元素底部更改为左侧。使用这样的代码时，scroll-padding-bottom 属性将不再起作用：

#container {
  writing-mode: vertical-rl;
  scroll-padding-bottom: 30px;
}
#container > div {
  scroll-snap-align: end none;
}

亲自试一试

CSS 语法

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

属性值

值 描述
auto 默认值。浏览器计算填充。
length

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

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

技术细节

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

浏览器支持

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

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

相关页面

Referentie:CSS richting eigenschap

Referentie:CSS scroll-snap-align eigenschap

Referentie:CSS scroll-snap-type eigenschap

Referentie:CSS writing-mode eigenschap