CSS scroll-padding-block 属性

Paglilinaw at Paggamit

scroll-padding-block Ang atibyo na ito ay nagtutukoy sa layo mula sa konteyner hanggang sa posisyon ng pagkakasimula ng anak na elemento sa direksyon ng bloke.

Ito nangangahulugan na kapag itinapos mo ang paggalaw ng mga bolyum, ang paggalaw ay mabilis na itatayo at itatapos sa layo ng direksyon ng bloke sa posisyon ng pagkakasimula at konteyner sa itinakdang layo.

Ang direksyon ng bloke ay ang direksyon kung saan ang susunod na linya ay ilalagay sa kapalaran ng kasalukuyang linya, na ito rin ang paraan ng pagsasapakita ng mga tagapagdisenyong may CSS display: block; (gaya ng <p> at <div> tag) sa pahina. Ang direksyon ng bloke ay nasa ilalim ng wika ng pagsusulat, halimbawa, ang Mongolian ay naglalagay ng bagong linya mula sa kaliwa papunta sa kanan, kaya ang direksyon ng bloke ay mula sa kaliwa papunta sa kanan, habang ang pahina ng Ingles ay may patadong direksyon ng bloke. Ang direksyon ng bloke ay maaaring maisaayos sa pamamagitan ng CSS atibyo: writing-mode Para itakda.

Ang posisyon ng pagkakasimula ay ang posisyon kung saan ang anak na elemento ay sumasadsad sa loob ng konteyner kapag itinapos mo ang paggalaw ng mga bolyum.

Babala:Ang atibyo na ito lamang sa direksyon ng bloke,scroll-snap-align Ang atibyo ay gumagana kapag ang halaga ay 'start' o 'end'.

scroll-padding-block Ang atibyo ay isang maikliang paraan ng sumusunod na mga atibyo:

• scroll-padding-block-start
• scroll-padding-block-end

scroll-padding-block Ang halaga ng atibyo ay maaaring itakda sa iba't ibang paraan:

Kung ang scroll-padding-block na atibyo ay may dalawang halaga:

scroll-padding-block: 10px 50px;

• Ang layo mula sa simula ay 10px
• Ang layo mula sa katapusan ay 50px

Kung ang scroll-padding-block na atibyo ay may isang halaga:

scroll-padding-block: 10px;

• Ang layo mula sa simula at katapusan ay 10px

Para makita scroll-padding-block Ang epekto ng atibyo, dapat itakda sa mga anak na elemento scroll-snap-align 属性，并在父元素上设置 scroll-padding-block 和 scroll-snap-type 属性。

CSS 的 scroll-padding-block 和 scroll-padding-inline 属性与 CSS 属性 CSS scroll-padding-top 属性、scroll-padding-bottom、scroll-padding-left 和 scroll-padding-right 非常相似，但 scroll-padding-block 和 scroll-padding-inline 属性依赖于块方向和行内方向。

实例

例子 1

在块方向上，将滚动内边距设置为从容器到吸附位置的 20px：

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

亲自试一试

例子 2：图片库

scroll-padding-block 属性可以用于具有吸附行为的图片画廊，以将图片推到固定元素下方：

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

亲自试一试

例子 3

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

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

亲自试一试

CSS 语法

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

属性值

技术细节

浏览器支持

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

相关页面

参考：CSS scroll-padding-block-end 属性

参考：CSS scroll-padding-block-start 属性

参考：CSS scroll-snap-align 属性

参考：CSS scroll-snap-type 属性

参考：CSS writing-mode 属性