CSS scroll-margin-block 属性

Paglilinaw at Paggamit

scroll-margin-block Ang attribute na ito ay tumutukoy sa distansya sa pagitan ng posisyon ng pag-attach at ang container sa direksyong bloke.

Ito nangangahulugan na kapag ititigil mo ang paggalaw, ang paggalaw ay mabilis na itataas at ititigil sa posisyon ng pag-attach at ang container sa partikular na distansya sa direksyong bloke.

Ang direksyong bloke ay tumutukoy sa direksyong inilalagay ng susunod na linya kumpara sa kasalukuyang posisyon ng linya, na ito rin ang paraan ng pagsasapakil sa web page ng mga tag na may CSS display: block; (gaya ng <p> at <div> tag). Ang direksyong bloke ay umaabot sa wika ng pagsusulat, halimbawa, ang bagong linya ng Mongolian ay nakatali mula sa kanan papunta sa kaliwa, kaya ang direksyong bloke ay mula sa kanan papunta sa kaliwa, habang ang direksyong bloke ng English page ay pababa. Ang direksyong bloke ay maaaring itayo sa pamamagitan ng CSS attribute writing-mode na naglalayong ito.

Ang posisyon ng pag-attach ay tumutukoy sa posisyon kung saan ang mga anak na elemento ay nagsisitain sa loob ng container kapag ititigil ang paggalaw.

Babala:Ang attribute na ito lamang ay para sa direksyon ng bloke: scroll-snap-align Naging epektibo ang attribute kapag ang halaga nito ay 'start' o 'end'.

• scroll-margin-block-start
• scroll-margin-block-end

scroll-margin-block Ang halaga ng attribute ay maaaring itayo sa iba't ibang paraan:

Kung ang attribute na scroll-margin-block ay may dalawang halaga:

scroll-margin-block: 10px 50px;

• 开始处的距离为 10px
• 结束处的距离为 50px

如果 scroll-margin-block 属性有一个值：

scroll-margin-block: 10px;

• 开始处和结束处的距离均为 10px

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

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

实例

例子 1

设置块方向上吸附位置与可滚动容器之间的距离：

div {
  scroll-margin-block: 10px;
}

亲自试一试

例子 2

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

div {
  scroll-margin-block: 20px 0;
  writing-mode: vertical-rl;
}

亲自试一试

CSS 语法

scroll-margin-block: 0|value|initial|inherit;

属性值

技术细节

浏览器支持

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

相关页面

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

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

参考：CSS scroll-snap-align 属性

参考：CSS scroll-snap-type 属性

参考：CSS writing-mode 属性