Atribut scroll-padding CSS

Definisi dan penggunaan

scroll-padding Atribut ini menentukan jarak dari kontainer ke posisi lepas elemen anak.

Artinya, saat Anda berhenti menggerakkan halaman, pergerakan penyesuaian bercepat dan berhenti di jarak yang ditentukan dari kontainer ke posisi lepas elemen anak yang berfokus.

Posisi lepas adalah posisi yang dipegang oleh elemen anak saat halaman berhenti bergerak di dalam kontainer.

scroll-padding Atribut ini adalah singkatan dari atribut berikut:

scroll-padding Nilai atribut dapat diatur dengan berbagai cara:

Jika atribut scroll-padding memiliki empat nilai:

scroll-padding: 15px 30px 60px 90px;
  • Jarak atas adalah 15px
  • Jarak kanan adalah 30px
  • Jarak bawah adalah 60px
  • Jarak kiri adalah 90px

Jika atribut scroll-padding memiliki tiga nilai:

scroll-padding: 15px 30px 60px;
  • Jarak atas adalah 15px
  • Jarak kiri dan kanan adalah 30px
  • Jarak bawah adalah 60px

Jika atribut scroll-padding memiliki dua nilai:

scroll-padding: 15px 30px;
  • Jarak atas dan bawah adalah 15px
  • Jarak kiri dan kanan adalah 30px

Jika atribut scroll-padding memiliki satu nilai：

scroll-padding: 10px;
  • Jarak seluruh empat arah adalah 10px

dapat dilihat scroll-padding pada elemen induk, efek atribut scroll-snap-align Atribut, dan atur atribut scroll-padding dan scroll-snap-type Atribut.

Perhatian：Dalam contoh di bawah, marjin internal diatur untuk semua sisi, tetapi karena scroll-snap-align Ditetapkan menjadi "start", sehingga hanya marjin atas yang berubah perilaku ber滚动kan.

Contoh

Contoh 1

Atur marjin internal ber滚动kan dari kontainer ke posisi penyesuaian menjadi 20px：

div {
  scroll-padding: 20px;
}

Coba sendiri

Contoh 2: Pustaka gambar

scroll-padding Atribut dapat digunakan di galleri gambar yang memiliki perilaku penyesuaian, untuk menekan gambar ke bawah elemen tetap:

#container {
  scroll-padding: 30px 0 0 0;
}
Elemen atas yang tetap
Beijing Penari Wuhan Tulip Hangzhou

Coba sendiri

Contoh 3: Atur marjin internal ber滚动kan dasar dan sisi kanan

scroll-padding Atribut dapat diatur di dasar dan sisi kanan kontainer sekaligus. Ber滚动kan horizontal dan vertical ke elemen berikutnya untuk melihat efek:

#container {
  scroll-padding: 0 10px 30px 0;
}





Coba sendiri

Syntaks CSS

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

Nilai atribut

Nilai Deskripsi
auto Nilai default. Browser menghitung marjin internal.
length

Tentukan marjin internal berdasarkan satuan px, pt, cm, dll.

Tidak diizinkan untuk menggunakan nilai negatif. Lihat:Satuan CSS。
% Tentukan jarak marjin internal berdasarkan persentase lebar elemen penyangga.
initial Atur atribut ini ke nilai default. Lihat initial。
inherit Mengambil atribut ini dari elemen induknya. Lihat inherit。

Detil teknis

Nilai default： auto
Inheritance： Tidak
Pembuatan animasi： Tidak didukung. Lihat:Properti animasi。
Versi： CSS3
Syntaks JavaScript： object.style.scrollPadding="20px"

Dukungan browser

Angka di tabel menunjukkan versi browser pertama yang mendukung sifat ini.

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

Halaman terkait

Referensi：Atribut scroll-padding-bottom CSS

Referensi：Atribut scroll-padding-left CSS

Referensi：Atribut scroll-padding-right CSS

Referensi：Atribut scroll-padding-top CSS

Referensi：Atribut scroll-snap-align CSS

Referensi：Atribut scroll-snap-type CSS