Properti scroll-padding-top CSS

Definisi dan penggunaan

scroll-padding-top Properti menentukan jarak dari puncak kontainer ke posisi penarik elemen anak.

Posisi penarik adalah posisi dimana elemen anak di dalam kontainer menarik ke tempat yang disediakan saat menghentikan penarikan.

Posisi penarikan ditentukan scroll-snap-align direction pengaturan atribut dan writing-mode pengaruhnya.

Perhatian:Atribut ini hanya berlaku saat posisi penarikan diatur di atas elemen anak.

Untuk melihat scroll-padding-top Atribut, harus diatur di elemen anak untuk melihat efeknya. scroll-snap-align Atribut, dan pengaruh pengaturan scroll-padding-top dan scroll-snap-type Atribut.

Contoh

Contoh 1

Atur margin internal scroll dari atas kontainer ke posisi penarikan 20px:

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

Coba sendiri

Contoh 2: Pustaka gambar

scroll-padding-top Atribut ini dapat digunakan di galleri gambar yang memiliki penarikan untuk menarik gambar ke bawah elemen yang tetap:

#container {
  scroll-padding-top: 30px;
}

Coba sendiri

Contoh 3: Atur margin internal di atas

Jika penarikan di kedua arah telah disetel, pengaturan ini juga dapat disetel di kontainer: scroll-padding-top Atribut. Bergerak ke bawah secara vertikal ke elemen berikutnya untuk melihat efek:

#container {
  scroll-padding-top: 30px;
}

Coba sendiri

Contoh 4: Posisi penarikan

Untuk membuat scroll-padding-top Atribut ini akan berlaku, posisi penarikan harus diatur di atas elemen anak. Dalam contoh ini,writing-mode Atribut ini akan menarik posisi dari atas elemen anak ke kanan. Saat menggunakan kode seperti ini,scroll-padding-top Atribut ini tidak akan berfungsi lagi:

#container {
  writing-mode: vertical-rl;
  scroll-padding-top: 30px;
}
#container > div {
  scroll-snap-align: start none;
}

Coba sendiri

Sintaksis CSS

scroll-padding-top: auto|value|initial|inherit;

Nilai atribut

Nilai Deskripsi
auto Nilai standar. Browser menghitung margin internal.
length

Tentukan scroll-padding-top 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 standarnya. Lihat initial.
inherit Mengambil atribut ini dari elemen induknya. Lihat inherit.

Detil teknis

Nilai standar: auto
Inheritance: Tidak
Produksi animasi: Tidak didukung. Lihat:Atribut yang berhubungan dengan animasi.
Versi: CSS3
Sintaksis JavaScript: object.style.scrollPaddingTop="20px"

Dukungan browser

Tabel angka di dalam tabel menunjukkan versi browser yang pertama yang mendukung atribut ini penuh.

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

Halaman terkait

Referensi：Atribut direction CSS

Referensi：Properti scroll-snap-align CSS

Referensi：Properti scroll-snap-type CSS

Referensi：Atribut writing-mode CSS