Atribut scroll-margin-block-end CSS

Definisi dan penggunaan

scroll-margin-block-end Atribut menentukan jarak antara posisi aligasi di arah blok dan kontainer.

Artinya, ketika Anda berhenti menggulir, pen guliran akan menyesuaikan dan berhenti di posisi pengguliran yang diatur di jarak antara posisi akhir elemen anak di arah blok dan kontainer.

arah blok adalah referensi posisi terhadap baris yang ada, arah penempatan baris berikutnya. Ini juga cara penataan tata letak 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, sehingga 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 tarung adalah posisi dimana elemen anak di dalam kontainer menarung ketika Anda berhenti menggulir.

Perhatian:Atribut ini hanya berlaku di arah blok scroll-snap-align atribut yang diatur ke 'end' akan berfungsi.

lihat scroll-margin-block-end efek atribut dapat diatur di elemen anak, untuk scroll-margin-block-end dan scroll-snap-align dapat diatur di elemen induk, dan atribut scroll-snap-type .

Atribut CSS scroll-margin-inline dan scroll-margin-block atribut sama dengan atribut CSS Properti 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 baris.

Contoh

Contoh 1

Pada arah blok, atur posisi penyesuaian jarak luar scroll dengan kontainer 20px:

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

Coba sendiri

Contoh 2

Ketika elemen <div> writing-mode Ketika atribut nilai vertical-rl, arah blok berarah dari kanan ke kiri. Hasilnya ujung elemen pindah dari bawah ke kiri:

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

Coba sendiri

Syntax CSS

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

Nilai atribut

Detil teknis

Dukungan browser

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

Halaman terkait

Referensi：Properti scroll-snap-align CSS

Referensi：Properti scroll-snap-type CSS

Referensi：Atribut writing-mode CSS