Mwongozo wa CSS scroll-padding-block-end

定义和用法

scroll-padding-block-end 属性指定在块方向上，从容器末端到子元素吸附位置的距离。

这意味着，当你停止滚动时，滚动将快速调整，并在块方向上，于吸附位置和容器之间指定的距离处停止。

Maelezo ya kibali ni upeo wa misingi wa mstari wa hivi karibuni, mstari mwingine unaingizwa katika kilele cha kuzingizia. Hii ni pia ina CSS display: block; ya kifupi (kama picha <p> na <div> ya kifupi) katika muundo wa ukurasa. Maelezo ya kibali inatokea kwa lugha ya kuzingizia, kwa mfano, lugha ya Mongolian ina upeo wa mstari kutoka kushoto hadi kulia, kwa hivyo maelezo ya kibali ni kutoka kushoto hadi kulia, na maelezo ya kilele ya Kiingereza ina upeo wa mstari hadi chini. Maelezo ya kibali inaweza kufikia kwa kipendekezo cha CSS ya kifupi writing-mode 来定义。

吸附位置是指当你停止滚动时，子元素在容器中吸附到位的位置。

注意：此属性仅在块方向的 scroll-snap-align 属性设置为 'end' 时才起作用。

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

实例

例子 1

设置从容器末端到吸附位置的块方向滚动内边距为 20px：

div {
  scroll-padding-block-end: 20px;
}

亲自试一试

例子 2：图片库

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

#container {
  scroll-padding-block-end: 30px;
}

亲自试一试

例子 3

当容器元素的 writing-mode 属性值设置为 vertical-rl 时，块方向上的容器末端和子元素从底部移动到左侧。这会影响滚动吸附行为以及 scroll-padding-block-end 属性的工作方式：

#container {
  scroll-padding-block-end: 20px;
  writing-mode: vertical-rl;
}

亲自试一试

CSS 语法

scroll-padding-block-end: auto|value|initial|inherit;

属性值

Vitoezaa ya teknolojia

mabaya ya kibao

maneno ya kifaa cha mifano kwenye tabea inaonyesha barivisho ya kwanza ya programu ya kibao ambayo inakubali tabia hiyo.

pajiado kipya

Tunafikia:Mwongozo wa CSS scroll-snap-align

Tunafikia:Mwongozo wa CSS scroll-snap-type

Tunafikia:Mwili wa CSS writing-mode