CSS scroll-margin-inline 属性

Tutukoy at paggamit

scroll-margin-inline Ang atribute ay tumutukoy sa layo sa direksyon ng panig ng inline sa pagitan ng posisyon ng pag-attach at konteyner.

Ito nangangahulugan na, kapag itinigil mo ang paggalaw, ang paggalaw ay mabilis na itatayo at mananatili sa itaasang layo sa direksyon ng panig ng inline kung saan ito ay nasa posisyon ng pag-attach at konteyner.

Ang direksyon ng panig ng inline ay tumutukoy sa direksyon kung saan ang susunod na character ay ilalagay sa loob ng linya kumpara sa kasalukuyang character, ito rin ang paraan kung paano i-layout ng mga tag na may CSS display: inline; (gaya ng <a> at <strong> tag) sa teksto. Ang direksyon ng panig ng inline ay umaabot sa wika ng pagsusulat, halimbawa, ang bagong character ng Arabic ay ayon sa kanan papasok, kaya ang direksyon ng panig ng inline ay mula kanan papasok, habang ang direksyon ng panig ng inline ng pahina ng Ingles ay mula sa kaliwa papasok. Ang direksyon ng panig ng inline ay maaaring itakda sa pamamagitan ng CSS atribute direction 和 writing-mode Tutukoy.

Ang posisyon ng pag-attach ay tumutukoy sa posisyon kung saan ang anak na elemento ay mag-attach sa lalim na konteyner kapag ito ay huminto sa paggalaw.

scroll-margin-inline Ang atribute ay isang maikliang pagsusulat ng sumusunod na atribute:

• scroll-margin-inline-start
• scroll-margin-inline-end

Kung ang scroll-margin-inline na atribute ay may dalawang halaga:

scroll-margin-inline: 20px 70px;

• Ang layo mula sa simula ay 20px
• Ang layo mula sa katapusan ay 70px

Kung ang scroll-margin-inline na atribute ay may isang halaga:

scroll-margin-inline: 20px;

• Ang layo mula sa simula at katapusan ay 20px

Para makakita scroll-margin-inline Ang epekto ng atributo ay dapat itakda sa mga anak na elemento scroll-margin-inline 和 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-inline: 20px;
}

亲自试一试

例子 2

当 <div> 元素的 writing-mode 属性值设置为 vertical-rl 时，行内方向是向下。结果是元素的起始位置从左侧移动到顶部，元素的结束位置从右侧移动到底部。这也影响了 scroll-margin-inline 属性：

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

亲自试一试

例子 3

当 <div> 元素的 direction 属性值设置为 rtl 时，行内方向是从右到左。结果是元素的起始位置从左侧移动到右侧，元素的结束位置从右侧移动到左侧。这也影响了 scroll-margin-inline 属性：

div {
  scroll-margin-inline: 0 20px;
  direction: rtl;
}

亲自试一试

CSS 语法

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

属性值

技术细节

浏览器支持

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

相关页面

参考：CSS direction 属性

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

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

参考：CSS scroll-snap-align 属性

参考：CSS scroll-snap-type 属性

参考：CSS writing-mode 属性