CSS scroll-margin-inline özelliği

Tanımlama ve kullanım

scroll-margin-inline Bu özellik, yanyana yönde, yankı yerleşimi ile konteyner arasındaki mesafeyi belirtir.

Bu, durdurduğunuzda, kaydırma hızlı bir şekilde ayarlanır ve yanyana yönde belirtilen mesafede, yankı yerleşimi ile konteyner arasında durur, bu mesafe yankı yerleşimi ile konteyner arasında yer alır.

İç yönde, bir karakterin mevcut karaktere göre satır içindeki konumunu yerleştirdiği yöndir. Bu, CSS display: inline; etiketleri (örneğin <a> ve <strong> etiketleri) metin içindeki yerleşim tarzıdır. İç yönde yazı diliye bağlıdır; örneğin, Arapça yeni karakterler sağdan sola dizilir, bu yüzden iç yönde yanyana dizilir, İngilizce sayfaların iç yönde soldan sağa dır. direction 和 writing-mode Tanımlama.

Yankı yerleşimi, alt elementin durdurulduğunda konteynere yankılanacağı konum demektir.

scroll-margin-inline Bu özellik, aşağıdaki özelliklerin kısaltılmış özelliğidir:

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

Eğer scroll-margin-inline özelliği iki değere sahipse:

scroll-margin-inline: 20px 70px;

• Başlangıç yerinin mesafesi 20px'dir
• Bitiş yerinin mesafesi 70px'dir

Eğer scroll-margin-inline özelliği bir değere sahipse:

scroll-margin-inline: 20px;

• Başlangıç ve bitiş yerlerinin mesafesi 20px'dir

Görmek için scroll-margin-inline Özellik etkisi, alt element üzerinde ayarlanmalıdır scroll-margin-inline 和 scroll-snap-align 属性，并在父元素上设置 scroll-snap-type 属性。

CSS 的 scroll-margin-inline 和 scroll-margin-block 属性与 CSS 属性 CSS scroll-margin-top özelliği、Alt Yatay Marj、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;

属性值

技术细节

浏览器支持

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

İlgili Sayfalar

Referans:CSS yönlendirme özelliği

Referans:CSS scroll-margin-inline-end özelliği

Referans:CSS scroll-margin-inline-start özelliği

Referans:CSS scroll-snap-align özelliği

Referans:CSS scroll-snap-type özelliği

Referans:CSS writing-mode özelliği