CSS scroll-margin-inline-end 属性

Ang kahulugan at paggamit

scroll-margin-inline-end Ang attribute ay nagsasagawa ng espesipikong distansya sa pagitan ng posisyon ng pag-attach at ng container sa direksyon ng inline.

Ito nangangahulugan na, kapag tumitigil ka sa pag-rol, ang pag-rol ay mabilis na ayusin at mananatili sa espesipikong layong itinakda, ang layong ito ay ang distansya sa pagitan ng posisyon ng pag-attach ng dulo ng anak na elemento at ng container.

Ang direksyon ng inline ay ang paraan kung paano ihahanda ang kalakip ng susunod na character sa loob ng linya kumpara sa kasalukuyang character, ito rin ang layout ng tag na may CSS display: inline; (gaya ng <a> at <strong> tag) sa loob ng teksto. Ang direksyon ng inline ay depende sa wika ng pagsusulat, halimbawa, ang bagong character ng Arabic ay naihalong mula kanan sa kaliwa, kaya ang direksyon ng inline ay mula kanan sa kaliwa, habang ang direksyon ng inline sa English page ay mula sa kaliwa sa kanan. Ang direksyon ng inline ay maaaring mapalitan sa pamamagitan ng CSS attribute direction 和 writing-mode Ang kahulugan.

Ang lokasyon ng pag-attach ay ang posisyon kung saan ang anak na elemento ay naka-attach sa loob ng container kapag tumitigil ka sa pag-rol.

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

要看到 scroll-margin-inline-end 属性的效果，必须在子元素上设置 scroll-margin-inline-end 和 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-end: 20px;
}

亲自试一试

例子 2

当 <div> 元素的 writing-mode 属性值设置为 vertical-rl 时，行内方向是向下。结果是元素的末端从右侧移动到底部：

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

亲自试一试

例子 3

当 <div> 元素的 direction 属性值设置为 rtl 时，行内方向是从右到左。结果是元素的末端从右侧移动到左侧：

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

亲自试一试

CSS 语法

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

属性值

技术细节

浏览器支持

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

相关页面

參考：CSS direction 属性

參考：CSS scroll-snap-align 属性

參考：CSS scroll-snap-type 属性

參考：CSS writing-mode 属性