Sifat scroll-margin-inline CSS

definisi dan penggunaan

scroll-margin-inline properti menentukan jarak di arah dalam baris antara posisi tarikan dan kontainer.

ini berarti, saat Anda berhenti menggulir, penarikan akan segera mengatur dan berhenti di jarak yang ditentukan di arah dalam baris, jarak ini berada di antara posisi tarikan dan kontainer.

arah dalam baris adalah arah penempatan karakter berikutnya berhadapan dengan karakter yang ada di baris, ini juga cara penataan tanda buku yang mempunyai CSS display: inline; (seperti tanda buku <a> dan <strong>) dalam teks. Arah dalam baris tergantung pada bahasa tulis, misalnya karakter bahasa Arab diatur dari kanan ke kiri, jadi arah dalam baris adalah dari kanan ke kiri, sementara arah dalam baris halaman Inggris adalah dari kiri ke kanan. Arah dalam baris dapat diatur melalui properti CSS direction 和 writing-mode definisi.

kedudukan tarikan adalah kedudukan elemen anak yang menarik ke dalam kontainer saat penarikan berhenti.

scroll-margin-inline properti adalah singkatan untuk properti berikut:

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

jika properti scroll-margin-inline mempunyai dua nilai:

scroll-margin-inline: 20px 70px;

• jarak di awal adalah 20px
• jarak di akhir adalah 70px

jika properti scroll-margin-inline mempunyai nilai:

scroll-margin-inline: 20px;

• jarak di awal dan akhir adalah 20px

harus dilihat scroll-margin-inline kesan properti mesti diatur di elemen anak scroll-margin-inline 和 scroll-snap-align 属性，并在父元素上设置 scroll-snap-type 属性。

CSS 的 scroll-margin-inline 和 scroll-margin-block 属性与 CSS 属性 Sifat scroll-margin-top CSS、Halaman sebelumnya、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;

属性值

技术细节

浏览器支持

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

相关页面

Laman berkaitan属性 direction CSS

Laman berkaitanSifat scroll-margin-inline-end CSS

Laman berkaitanSifat scroll-margin-inline-start CSS

Laman berkaitanSifat scroll-snap-align CSS

Laman berkaitanSifat scroll-snap-type CSS

Laman berkaitanSifat writing-mode CSS