属性 scroll-margin-inline-end CSS

Definisi dan penggunaan

scroll-margin-inline-end Properti menentukan jarak antara posisi penyerapan dan kontainer di arah teks dalam baris.

Artinya, saat Anda menghentikan penarikan, penarikan akan menyesuaikan diri dengan cepat dan berhenti di jarak yang ditentukan di arah teks dalam baris, jarak ini adalah jarak antara posisi penyerapan akhir elemen anak dan kontainer.

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

Lokasi penyerapan adalah tempat yang dihentikan penarikan saat elemen anak berada di tempat yang diserap di dalam kontainer.

注意：此属性仅在行内方向上设置了 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 属性 属性 scroll-margin-top CSS、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;

属性值

技术细节

浏览器支持

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

页面相关

Rujukan:Atribut direction CSS

Rujukan:属性 scroll-snap-align CSS

Rujukan:属性 scroll-snap-type CSS

Rujukan:属性 writing-mode CSS