CSS scroll-padding-bottom egenskab

definisjon og bruk

scroll-padding-bottom egenskab angiver afstanden fra beholderens bund til adhesionspositionen for underelementet.

adhesionsposition er den position, hvor et underelement i en beholder sætter sig fast, når du stopper med at rulle. Adhesionspositionen defineres ved scroll-snap-align indstilling af egenskaber, men kan også påvirkes af CSS-egenskaber direction 和 writing-mode påvirkningen.

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

要看到 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 units。
% 指定包含元素宽度的百分比作为内边距。
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

相关页面

Referencer:CSS direction egenskab

Referencer:CSS scroll-snap-align egenskab

Referencer:CSS scroll-snap-type egenskab

Referencer:CSS writing-mode egenskab