Atribut scroll-margin-left CSS
- Halaman sebelumnya scroll-margin-inline-start
- Halaman berikutnya scroll-margin-right
Definisi dan penggunaan
scroll-margin-left
属性指定吸附位置与容器之间的距离。
Atribut yang menentukan jarak antara posisi yang diangkat dan kontainer. scroll-snap-align
Posisi yang diangkat adalah posisi yang tetap di kontainer saat elemen anak berhenti menggulir. Posisi yang diangkat ditentukan melalui direction
dan Atribut pengaturan, tetapi mungkin juga terpengaruh oleh atribut CSS lainnya
writing-mode
pengaruhnya.Perhatian:
Ini hanya berlaku saat posisi yang diangkat diatur di sisi kiri elemen anak. scroll-margin-left
Atribut efek, harus diatur di elemen anak untuk melihat scroll-margin-left
dan scroll-snap-align
Atribut, dan atur scroll-snap-type
Atribut.
Contoh
Contoh 1
Atur jarak scroll margin antara posisi yang diangkat dan kontainer menjadi 20px:
div { scroll-margin-left: 20px; }
Contoh 2: Perpustakaan gambar
scroll-margin-left
Atribut ini dapat digunakan dalam galleri gambar yang memiliki perilaku yang diangkat. Disini,scroll-margin-left
Buat pengguna tahu bahwa ada gambar lain di sisi kiri. Gigit gambar pertama untuk melihat efek:
#container > img { scroll-margin-left: 30px; }
Contoh 3: Posisi yang diangkat
Untuk membuat scroll-margin-left
Atribut ini berlaku, posisi yang diangkat harus diatur di sisi kiri elemen anak. Dalam kasus ini,direction
Atribut ini akan mengubah posisi yang diangkat dari sisi kiri elemen anak ke sisi kanan. Dengan kode seperti ini,scroll-margin-left
Atribut ini tidak akan berfungsi lagi:
#container { direction: rtl; } #container > div { scroll-margin-left: 30px; scroll-snap-align: none start; }
Syntaks CSS
scroll-margin-left: 0|value|initial|inherit;
Nilai atribut
Nilai | Deskripsi |
---|---|
0 | 滚动外边距左侧为 0。默认值。 |
length |
Tentukan nilai滚动外边距左侧的值,单位为 px、pt、cm 等。允许使用负值。 Lihat:Satuan CSS. |
initial | Atur atribut ini ke nilai defaultnya. Lihat: initial. |
inherit | Mengambil atribut ini dari elemen induknya. Lihat: inherit. |
Detil teknis
Nilai default: | 0 |
---|---|
Inheritsi: | Tidak |
Pembuatan animasi: | Tidak didukung. Lihat:Atribut berhubungan dengan animasi. |
Versi: | CSS3 |
Syntaks JavaScript: | object.style.scrollMarginLeft="20px" |
Dukungan browser
Angka di tabel menunjukkan versi browser yang pertama 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 direction CSS
Referensi:Atribut scroll-snap-align CSS
Referensi:Atribut scroll-snap-type CSS
Referensi:Properti writing-mode CSS
- Halaman sebelumnya scroll-margin-inline-start
- Halaman berikutnya scroll-margin-right