CSS scroll-padding-block-start 属性

Paglilinaw at Paggamit

scroll-padding-block-start Ang katangian ay nagtatalaga ng layong direksyon, mula sa simula ng kanyang kumbento hanggang sa posisyon ng maghahagis ng anak.

Ito nangangahulugan na, kapag nagpalayas ka ng paggalaw, ang paggalaw ay mabilis na malilipat at magpapatigil sa pagitan ng posisyon na maghagis at ang paghahawak sa kanyang kalagitnaan na itinalaga sa layong direksyon.

Ang blok direksyon ay tumutukoy sa posisyon sa kabilang hanay, ang susunod na hanay na ilalagay ay ang direksyon ng paglagay. Ito rin ang pagkakalagay ng tag sa pahina na may CSS display: block; tulad ng <p> at <div> tag. Ang blok direksyon ay depende sa wika ng pagsulat, halimbawa, ang bagong hanay ng Mongolian ay nilalagay mula sa kaliwa papunta sa kanan, kaya ang blok direksyon ay mula sa kaliwa papunta sa kanan, habang ang blok direksyon ng pahina ng Ingles ay patungo sa ilalim. Ang blok direksyon ay maaring maisaayos sa pamamagitan ng katangian ng CSS writing-mode 来定义。

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

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

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

实例

例子 1

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

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

亲自试一试

例子 2：图片库

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

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

亲自试一试

例子 3

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

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

亲自试一试

CSS 语法

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

属性值

技术细节

浏览器支持

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

相关页面

参考：CSS scroll-snap-align 属性

参考：CSS scroll-snap-type 属性

参考：CSS writing-mode 属性