Mfano wa CSS scroll-padding-bottom

定义和用法

scroll-padding-bottom 属性指定从容器底部到子元素吸附位置的距离。

吸附位置是指当你停止滚动时，子元素在容器中吸附到位的位置。吸附位置通过 scroll-snap-align masharti ya muundo, lakini inaweza kusababishwa na masharti ya CSS matokeo 和 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 单位.
% 指定包含元素宽度的百分比作为内边距。
initial 将此属性设置为其默认值。参阅 initial.
inherit 从其父元素继承此属性。参阅 inherit.

vitumeo ya kidhamira

Chaguo cha kuzingatia: auto
kutumika kwa kumwambia hakuna
Hali ya uharibifu: hayahusishwa. Angalia:madegi ya hali ya uharibifu.
Tengeneza: CSS3
Inayotumiwa kiingilizi cha JavaScript: object.style.scrollPaddingBottom="20px"

kampuni ya kifaa cha programu cha mtumiaji

jumla za namba za kifaa cha programu cha mtumiaji ambacho kinasababisha kufaa kwa sababu hiyo.

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

pànyè

Marejeo:Hisia CSS direction

Marejeo:Mfano wa CSS scroll-snap-align

Marejeo:Mfano wa CSS scroll-snap-type

Marejeo:Mfano wa writing-mode katika CSS