Atribut scroll-padding-left CSS

definisi dan penggunaan

scroll-padding-left aturan properti menentukan jarak dari sisi kiri kontainer ke posisi penarik elemen.

posisi penarik adalah posisi dimana elemen anak di dalam kontainer menarik ke tempat saat berhenti menggulir.

posisi penarik ditentukan oleh scroll-snap-align aturan properti, tetapi mungkin juga terpengaruh oleh properti CSS arah dan aturan writing-mode pengaruhnya.

Perhatian:Properti ini hanya berlaku saat posisi penarik berada di sisi kiri elemen anak.

untuk melihat scroll-padding-left efek atribut ini harus diatur di elemen anak, scroll-snap-align atur atribut, dan atur atribut scroll-padding-left dan scroll-snap-type atribut.

contoh

contoh 1

atur margin internal untuk jarak dari sisi kiri kontainer ke posisi penarikan 20px:

div {
  scroll-padding-left: 20px;
}

cobalah sendiri

contoh 2: pustaka gambar

scroll-padding-left atribut ini dapat digunakan untuk galleri gambar yang memiliki tindakan penarikan untuk menarik gambar dari belakang elemen yang tetap ke dalam tampilan:

#container > img {
  scroll-padding-left: 30px;
}

cobalah sendiri

contoh 3: atur margin internal di kiri

Ketika adanya pengaturan tindakan penarikan di kedua arah, tindakan penarikan juga dapat diatur di kontainer: scroll-padding-left atur atribut. Goyahkan berikutnya untuk melihat efek:

#container > div {
  scroll-padding-left: 30px;
}

cobalah sendiri

contoh 4: posisi penarikan

untuk membuat scroll-padding-left atribut aktif, posisi penarikan harus diatur di sisi kiri elemen anak. Dalam contoh ini,arah nilai atribut 'rtl' akan menarik posisi dari sisi kiri elemen anak ke sisi kanan. Saat menggunakan kode seperti ini,scroll-padding-left atribut ini tidak akan berfungsi lagi:

#container {
  arah: rtl;
  scroll-padding-left: 30px;
}
#container > div {
  scroll-snap-align: none start;
}

cobalah sendiri

syntaks CSS

scroll-padding-left: auto|nilai|initial|inherit;

nilai atribut

nilai deskripsi
auto nilai standar. Browser akan menghitung margin internal.
panjang

tetapkan scroll-padding-left dengan satuan px, pt, cm, dll.

tidak diizinkan untuk menggunakan nilai negatif. Lihat:Satuan CSS.
% tetapkan persentase lebar elemen yang akan digunakan sebagai margin internal.
initial atur atribut ini ke nilai standarnya. Lihat: initial.
inherit mengambil atribut ini dari elemen induknya. Lihat: inherit.

detil teknis

nilai standar: auto
keberlanjutan: tidak
pembuatan animasi: tidak didukung. Lihat:atribut yang berhubungan dengan animasi.
versi: CSS3
syntaks JavaScript: object.style.scrollPaddingLeft="20px"

dukungan browser

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

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

halaman relevan

Referensi：Atribut direction CSS

Referensi：Atribut scroll-snap-align CSS

Referensi：Atribut scroll-snap-type CSS

Referensi：Atribut writing-mode CSS