CSS scroll-margin-inline özelliği
- Önceki Sayfa Alt Yatay Marj
- Sonraki Sayfa scroll-margin-inline-end
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
Ö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-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;
属性值
值 | 描述 |
---|---|
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
- Önceki Sayfa Alt Yatay Marj
- Sonraki Sayfa scroll-margin-inline-end