Atribut scroll-padding-right CSS

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;
}

Coba sendiri

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;
}

Coba sendiri

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;
}

Coba sendiri

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;
}

Coba sendiri

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