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. directionwriting-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 Özellik değeri farklı yöntemlerle ayarlanabilir:

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-inlinescroll-snap-align 属性,并在父元素上设置 scroll-snap-type 属性。

CSS 的 scroll-margin-inlinescroll-margin-block 属性与 CSS 属性 CSS scroll-margin-top özelliğiAlt Yatay Marjscroll-margin-leftscroll-margin-right 非常相似,但 scroll-margin-blockscroll-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;

属性值

描述
0 默认。元素的默认 scroll-margin-inline 距离。
length

指定以 px、pt、cm 等单位的距离。允许使用负值。

请参阅:CSS Birimleri

initial 将此属性设置为其默认值。参阅 initial
inherit 从其父元素继承此属性。参阅 inherit

技术细节

默认值: 0
继承性:
动画制作: 不支持。请参阅:动画相关属性
版本: CSS3
JavaScript 语法: object.style.scrollMarginInline="20px"

浏览器支持

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

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

İ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