Properti scroll-margin-block CSS

Definisi dan penggunaan

scroll-margin-block Atribut menentukan jarak di arah blok antara posisi taruh (snap position) dan kontainer.

Ini berarti saat Anda berhenti menggulir, guling akan segera mengatur dan berhenti di jarak yang ditentukan antara posisi taruh di arah blok dan kontainer.

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

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

Perhatian:Atribut ini hanya berlaku dalam arah blok: scroll-snap-align Atribut ini berlaku saat diatur menjadi 'start' atau 'end'.

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

scroll-margin-block Nilai atribut dapat diatur dengan berbagai cara:

Jika atribut scroll-margin-block memiliki dua nilai:

scroll-margin-block: 10px 50px;
  • jarak di awal adalah 10px
  • jarak di akhir adalah 50px

Jika atribut scroll-margin-block memiliki nilai:

scroll-margin-block: 10px;
  • jarak di awal dan akhir adalah 10px

Untuk melihat scroll-margin-block Atribut efeknya, harus diset di elemen anak scroll-margin-block dan scroll-snap-align Atribut, dan atur atribut scroll-snap-type .

Atribut CSS scroll-margin-inline dan scroll-margin-block Atribut ini sama seperti 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 pada arah blok dan arah baris.

Contoh

Contoh 1

Atur jarak antara posisi penarik di arah blok dan kontainer yang dapat digerakkan:

div {
  scroll-margin-block: 10px;
}

Coba sendiri

Contoh 2

Ketika elemen anak writing-mode Ketika nilai atribut diset ke vertical-rl, posisi awal elemen di arah blok pindah dari atas ke kanan, posisi akhir pindah dari bawah ke kiri. Ini akan mempengaruhi perilaku penyesuai gerakan penarik dan scroll-margin-block Cara kerja atribut:

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

Coba sendiri

Sintaksis CSS

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

Nilai atribut

Nilai Deskripsi
0 Standar. Nilai scroll-margin-block standar elemen.
length

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

Lihat:Satuan CSS.
initial Menetapkan atribut ini ke nilai standarnya. Lihat initial.
inherit Mengambil atribut ini dari elemen induknya. Lihat inherit.

Detil teknis

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

Dukungan browser

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

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

Halaman terkait

Referensi：Properti scroll-margin-block-end CSS

Referensi：Properti scroll-margin-block-start CSS

Referensi：Atribut scroll-snap-align CSS

Referensi：Atribut scroll-snap-type CSS

Referensi：Properti writing-mode CSS