Atribut scroll-margin-inline CSS

Definisi dan penggunaan

scroll-margin-inline Atribut menentukan jarak di arah teks dalam garis antara posisi lepas kunci dan kontainer.

Artinya, saat Anda berhenti menggulir, penarikan akan segera menyesuaikan dan berhenti di jarak yang ditentukan di arah teks dalam garis, jarak ini berada di antara posisi lepas kunci dan kontainer.

Arah teks dalam garis adalah arah penempatan karakter berikutnya berhadapan dengan karakter yang ada di garis, ini juga cara penempatan tanda terikat (seperti tag <a> dan <strong>) dalam teks. Arah teks dalam garis tergantung pada bahasa tulis, contohnya karakter bahasa Arab diatur dari kanan ke kiri, jadi arah teks dalam garis adalah dari kanan ke kiri, sementara arah teks dalam halaman Inggris adalah dari kiri ke kanan. Arah teks dalam garis dapat diatur melalui atribut CSS direction dan writing-mode Definisi.

Posisi lepas kunci adalah posisi dimana elemen anak diikat ke kontainer saat halaman berhenti menggulir.

scroll-margin-inline Atribut ini adalah singkatan dari atribut berikut:

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

Jika atribut scroll-margin-inline memiliki dua nilai:

scroll-margin-inline: 20px 70px;

• Jarak awal adalah 20px
• Jarak akhir adalah 70px

Jika atribut scroll-margin-inline memiliki nilai:

scroll-margin-inline: 20px;

• Jarak awal dan akhir adalah 20px

Untuk melihat scroll-margin-inline Efek properti, harus diatur di elemen anak scroll-margin-inline dan scroll-snap-align Atribut, dan diatur di elemen induk scroll-snap-type .

Atribut CSS scroll-margin-inline dan scroll-margin-block Atribut dengan atribut CSS Atribut scroll-margin-top CSS,Halaman sebelumnya,scroll-margin-left dan scroll-margin-right sama seperti, tapi scroll-margin-block dan scroll-margin-inline Atribut ini tergantung pada arah blok dan arah dalam.

Contoh

Contoh 1

Ditetapkan di arah dalam, dari posisi yang dianggap menarik ke kontainer yang dapat digerakkan:

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

Coba sendiri

Contoh 2

Ketika elemen <div> writing-mode Ketika atribut nilai diatur ke vertical-rl, arah dalam adalah ke bawah. Hasilnya posisi awal elemen pindah dari kiri ke atas, posisi akhir elemen pindah dari kanan ke bawah. Ini juga mempengaruhi: scroll-margin-inline Atribut:

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

Coba sendiri

Contoh 3

Ketika elemen <div> direction Ketika atribut nilai diatur ke rtl, arah dalam adalah dari kanan ke kiri. Hasilnya posisi awal elemen pindah dari kiri ke kanan, posisi akhir elemen pindah dari kanan ke kiri. Ini juga mempengaruhi: scroll-margin-inline Atribut:

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

Coba sendiri

Syntaks CSS

scroll-margin-inline: 0|value|initial|inherit;

Nilai atribut

Detil teknis

Dukungan Browser

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

相关页面

Halaman yang berhubunganAtribut direction CSS

Halaman yang berhubunganAtribut scroll-margin-inline-end CSS

Halaman yang berhubunganAtribut scroll-margin-inline-start CSS

Halaman yang berhubunganAtribut scroll-snap-align CSS

Halaman yang berhubunganAtribut scroll-snap-type CSS

Halaman yang berhubunganAtribut writing-mode CSS