Atribut scroll-margin-inline-start CSS

Definisi dan penggunaan

scroll-margin-inline-start Properti ini menentukan jarak antara posisi taruh dan kontainer dalam arah dalam baris.

Artinya, ketika Anda berhenti menggulir, gulir akan segera menyesuaikan diri, dan berhenti di jarak yang ditentukan di sebelah kiri dari posisi taruh untuk elemen anak, dalam arah dalam baris.

arah dalam baris adalah arah penempatan karakter berikutnya berhadapan dengan karakter yang ada dalam baris, ini juga cara penempatan tanda tangan yang memiliki CSS display: inline; seperti tag <a> dan <strong> dalam teks. Arah dalam baris ini berdasarkan bahasa tulis, seperti bahasa Arab yang menggunakan karakter baru 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 direction dan writing-mode definisi.

Posisi yang menarik adalah posisi dimana, ketika Anda berhenti menggeser, elemen anak menarik ke posisi yang diseret di dalam kontainer.

Perhatian:Atribut ini hanya berlaku scroll-snap-align berfungsi hanya saat nilai arah teks diatur menjadi 'start'.

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

Contoh

Contoh 1

Atur jarak dari posisi yang menarik ke kontainer yang dapat geser:

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

Coba Sendiri

Contoh 2

Ketika atribut <div> writing-mode Ketika nilai atribut diatur menjadi vertical-rl, arah teks dalam teks adalah ke bawah. Hasilnya posisi awal elemen pindah dari sisi kiri ke atas:

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

Coba Sendiri

Contoh 3

Ketika atribut <div> direction Ketika nilai atribut diatur menjadi rtl, arah teks dalam teks adalah dari kanan ke kiri. Hasilnya posisi awal elemen diatur dari sisi kiri (terhadap arah utama, sebenarnya masih dimulai dari sisi kanan, tetapi di sini 'sisi kiri' mengacu ke sisi kiri arah utama default (ltr)) sesuai:

div {
  scroll-margin-inline-start: 20px;
  direction: rtl;
}

Coba Sendiri

Syntaks CSS

inset-inline-start: 0|value|initial|inherit;

Nilai atribut

Detil Teknis

Dukungan Browser

Angka di tabel menunjukkan versi browser yang sepenuhnya mendukung atribut ini.

Halaman yang berhubungan

Referensi：Atribut direction CSS

Referensi：Atribut scroll-snap-align CSS

Referensi：Atribut scroll-snap-type CSS

Referensi：Atribut writing-mode CSS