Atribut scroll-margin-inline-end CSS

Definisi dan penggunaan

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

Artinya, saat Anda berhenti menggulir, penarikan akan segera mengatur dan berhenti di tempat yang ditentukan dalam arah dalam baris, jarak ini adalah jarak antara posisi penarik elemen anak dengan kontainer.

Arah dalam baris adalah arah penempatan karakter berikutnya terhadap karakter yang ada di dalam baris, ini juga cara tag yang memiliki CSS display: inline; (seperti tag <a> dan <strong>) disusun di dalam teks. Arah dalam baris tergantung pada bahasa tulis, misalnya karakter bahasa Arab diatur dari kanan ke kiri, sehingga 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 arah dan writing-mode Definisi.

Posisi penarik adalah tempat dimana elemen anak di dalam kontainer menarik ke tempat saat Anda berhenti menggulir.

perhatian:atribut ini hanya disetel di arah dalam teks scroll-snap-align atribut saat ini berfungsi saat nilai 'end'.

untuk melihat scroll-margin-inline-end atribut efek, harus disetel di elemen anak scroll-margin-inline-end dan scroll-snap-align atribut, dan atur scroll-snap-type .

atribut CSS scroll-margin-inline dan scroll-margin-block atribut sama dengan atribut CSS Atribut scroll-margin-top CSS,scroll-margin-bottom,scroll-margin-left dan scroll-margin-right sama seperti, tetapi scroll-margin-block dan scroll-margin-inline atribut ini tergantung dari arah blok dan arah dalam teks.

contoh

contoh 1

atur jarak dari posisi serapan ke kontainer yang dapat digerakkan:

div {
  scroll-margin-inline-end: 20px;
}

cobalah sendiri

contoh 2

ketika atribut <div> element writing-mode ketika nilai atribut vertical-rl disetel, arah dalam teks adalah ke bawah. Hasilnya ujung elemen bergerak dari sisi kanan ke bawah:

div {
  scroll-margin-inline-end: 20px;
  writing-mode: vertical-rl;
}

cobalah sendiri

contoh 3

ketika atribut <div> element arah ketika nilai atribut rtl disetel, arah dalam teks adalah dari kanan ke kiri. Hasilnya ujung elemen bergerak dari sisi kanan ke kiri:

div {
  scroll-margin-inline-end: 20px;
  arah: rtl;
}

cobalah sendiri

gramatika CSS

scroll-margin-inline-end: 0|nilai|initial|inherit;

nilai atribut

detil teknis

dukungan browser

angka di tabel menunjukkan versi browser yang pertama yang sepenuhnya mendukung atribut ini.

halaman yang relevan

Referensi：Atribut direction CSS

Referensi：Atribut scroll-snap-align CSS

Referensi：Atribut scroll-snap-type CSS

Referensi：Atribut writing-mode CSS