Properti scroll-margin-bottom CSS

Definisi dan penggunaan

scroll-margin-bottom Properti menentukan jarak antara posisi penarik dan wadah.

Posisi tarik adalah posisi yang elemen anak menarik ke dalam kontainer saat berhenti menggulingkan.

Posisi tarik melalui scroll-snap-align Atribut pengaturan, tetapi mungkin juga terpengaruh oleh atribut CSS direction dan writing-mode pengaruhnya.

Perhatian:Atribut ini hanya berlaku saat posisi tarik diatur di bagian bawah elemen anak.

Untuk melihat scroll-margin-bottom Akan menampilkan efek atribut, harus diatur di elemen anak. scroll-margin-bottom dan scroll-snap-align Atribut, dan atur scroll-snap-type Atribut.

Contoh

Contoh 1

Atur margin bawah guling antara posisi tarik dan kontainer menjadi 20px:

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

Coba sendiri

Contoh 2: Pustaka gambar

scroll-margin-bottom Atribut ini dapat digunakan untuk galleri gambar yang memiliki perilaku tarik.scroll-margin-bottom Beri tahu pengguna bahwa ada gambar lain di bawah. Gulingkan gambar pertama untuk melihat efek:

#container > img {
  scroll-margin-bottom: 30px;
}

Coba sendiri

Contoh 3: Posisi tarik

Untuk membuat scroll-margin-bottom Atribut ini berlaku, posisi tarik harus diatur di bagian bawah elemen anak. Dalam contoh ini,writing-mode Atribut ini akan menarik posisi dari bagian bawah elemen anak ke kiri. Saat menggunakan kode seperti ini,scroll-margin-bottom Atribut ini tidak lagi berlaku:

#container {
  writing-mode: vertical-rl;
}
#container > div {
  scroll-margin-bottom: 30px;
  scroll-snap-align: end none;
}

Coba sendiri

Syntaks CSS

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

Nilai atribut

Nilai Deskripsi
0 Margin bawah guling di bagian bawah adalah nol. Ini adalah nilai default.
length

Tentukan margin bawah guling dengan satuan px, pt, cm, dll. Diperbolehkan untuk menggunakan nilai negatif.

Lihat:Satuan CSS.
initial Atur atribut ini ke nilai default. Lihat: initial.
inherit Mengambil atribut ini dari elemen induknya. Lihat: inherit.

Detil teknis

Nilai default: none
Inheritsi: Tidak
Pembuatan animasi: Tidak didukung. Lihat:Atribut yang berhubungan dengan animasi.
Versi: CSS3
Syntaks JavaScript: object.style.scrollMarginBottom="20px"

Dukungan browser

Terdapat angka di tabel yang menunjukkan versi browser yang pertama yang mendukung atribut ini.

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

Halaman yang berhubungan

Referensi：Atribut direction CSS

Referensi：Properti scroll-snap-align CSS

Referensi：Properti scroll-snap-type CSS

Referensi：Atribut writing-mode CSS