Atribut scroll-margin-block-start CSS

definisi dan penggunaan

scroll-margin-block-start atribut menentukan jarak antara posisi pengguliran dan kontainer di arah blok.

ini berarti ketika Anda berhenti menggulir, gulir akan menyesuaikan dan berhenti di posisi pengguliran yang diatur di jarak yang ditentukan antara posisi mulai elemen anak di arah blok dan kontainer.

arah blok adalah arah penempatan elemen baris berikutnya terhadap baris yang ada, ini juga cara penataan tag yang memiliki CSS display: block; seperti tag <p> dan <div> di halaman. Arah blok tergantung pada bahasa tulisan, misalnya baris baru dalam bahasa Mongolian diatur dari kiri ke kanan, jadi arah blok adalah dari kiri ke kanan, sementara arah blok di halaman berbahasa Inggris adalah ke bawah. Arah blok dapat diatur melalui atribut CSS writing-mode definisi.

Posisi penyanggangan adalah posisi dimana elemen anak di dalam kontainer yang menempel saat Anda berhenti menggulir.

Perhatian:dalam arah blok. scroll-snap-align Atribut ini hanya bekerja saat atribut ini diatur ke 'start'.

untuk melihat scroll-margin-block-start efek atribut, harus diatur di elemen anak scroll-margin-block-start dan scroll-snap-align dan mengatur di elemen induk Atribut scroll-snap-type .

Atribut CSS scroll-margin-inline dan scroll-margin-block Atribut ini sama seperti atribut 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 inline.

Contoh

Contoh 1

Dalam arah blok, atur posisi penempatan dengan marjin luar scroll ke 20px dalam kontainer:

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

Coba Sendiri

Contoh 2

Ketika elemen <div> writing-mode Ketika atribut value diatur ke vertical-rl, arah blok berarah dari kanan ke kiri. Hasilnya bagian awal elemen bergerak ke kanan dari atas:

div {
  scroll-margin-block-start: 50px;
  writing-mode: vertical-rl;
}

Coba Sendiri

Sintaksis CSS

scroll-margin-block-start: 0|value|initial|inherit;

Nilai atribut

Nilai Deskripsi
0 Default. Jarak scroll-margin default elemen.
length

Tentukan jarak dengan satuan px, pt, cm, dll. Memungkinkan nilai negatif.

Lihat:Satuan CSS.
initial Setel atribut ini ke nilai default. Lihat initial.
inherit Mengambil atribut ini dari elemen induk. Lihat inherit.

Detil Teknis

Nilai Default: 0
Inheritance: Tidak
Pembuatan animasi: Tidak didukung. Lihat:Atribut yang berhubungan dengan animasi.
Versi: CSS3
Sintaksis JavaScript: object.style.scrollMarginBlockStart="20px"

Dukungan Browser

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

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

Halaman yang berhubungan

Referensi：Atribut scroll-snap-align CSS

Referensi：Atribut scroll-snap-type CSS

Referensi：Atribut writing-mode CSS