Atribut scroll-padding-right CSS
- Halaman sebelumnya scroll-padding-left
- Halaman berikutnya scroll-padding-top
definisi dan penggunaan
scroll-padding-right
aturan properti menentukan jarak dari sisi kanan kontainer ke posisi penarikan elemen.
lokasi penarik adalah posisi penarikan elemen anak saat berhenti menggulir di dalam kontainer.
lokasi penarik scroll-snap-align
aturan properti, namun mungkin juga terpengaruh oleh properti CSS direction
dan writing-mode
pengaruhnya.
Perhatian:此属性仅在吸附位置设置在子元素右侧时有效。
Atribut ini hanya berlaku saat posisi penarikan diatur di sisi kanan elemen anak. scroll-padding-right
Atribut efek, harus diatur di elemen anak untuk melihat: scroll-snap-align
Atribut, dan atur atribut scroll-padding-right
dan scroll-snap-type
Atribut.
Contoh
Contoh 1
Atur margin internal untuk jarak dari sisi kanan kontainer ke posisi penarikan 20px:
div { scroll-padding-right: 20px; }
Contoh 2: Pustaka gambar
scroll-padding-right
Atribut dapat digunakan di galleri gambar yang memiliki penarikan untuk menarik gambar dari belakang elemen yang tetap ke dalam ruang tampilan:
#container > img { scroll-padding-right: 30px; }
Contoh 3: Atur margin internal di sisi kanan
Jika penarikan diatur di kedua arah, penarikan dapat diatur di kontainer: scroll-padding-right
Atribut. Gerakkan penarikan ke elemen berikutnya untuk melihat efek:
#container > div { scroll-padding-right: 30px; }
Contoh 4: Posisi penarikan
Untuk membuat scroll-padding-right
Atribut aktif, posisi penarikan harus diatur di sisi kanan elemen anak. Dalam contoh ini,direction
Nilai atribut 'rtl' akan menarik posisi dari sisi kanan elemen anak ke sisi kiri. Saat menggunakan kode seperti ini,scroll-padding-right
Atribut yang tidak akan berfungsi lagi:
#container { direction: rtl; scroll-padding-right: 30px; } #container > div { scroll-snap-align: none end; }
Syntaks CSS
scroll-padding-right: auto|value|initial|inherit;
Nilai atribut
Nilai | Deskripsi |
---|---|
auto | Nilai standar. Browser menghitung margin internal. |
length |
Tentukan scroll-padding-right dengan satuan px, pt, cm, dll. Tidak diizinkan untuk menggunakan nilai negatif. Lihat:Satuan CSS. |
% | Tentukan persentase lebar elemen yang disertakan sebagai margin internal. |
initial | Atur atribut ini ke nilai standar. Lihat: initial. |
inherit | Mengambil atribut ini dari elemen orangtua. Lihat: inherit. |
Detil teknis
Nilai standar: | auto |
---|---|
Inheritsi: | Tidak |
Pembuatan animasi: | Tidak didukung. Lihat:Atribut berhubungan dengan animasi. |
Versi: | CSS3 |
Syntaks JavaScript: | object.style.scrollPaddingRight="20px" |
Dukungan browser
Angka di tabel menunjukkan versi browser 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-padding-left
- Halaman berikutnya scroll-padding-top