Sifat scroll-padding CSS

Definisi dan penggunaan

scroll-padding Atribut menentukan jarak dari kontainer ke lokasi serapan elemen anak.

Artinya, saat Anda berhenti ber滚动, ber滚动 akan segera menyesuaikan dan berhenti di jarak yang ditentukan dari kontainer ke lokasi serapan elemen anak.

Lokasi serapan adalah posisi yang tetap di dalam kontainer saat elemen anak berhenti ber滚动.

scroll-padding Atribut adalah singkatan dari atribut berikut:

scroll-padding Nilai atribut dapat diatur dengan berbagai cara:

Jika atribut scroll-padding mempunyai 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 mempunyai 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 mempunyai dua nilai:

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

Jika atribut scroll-padding memiliki nilai:

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

untuk melihat 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 ini, marjin penarikan diatur untuk semua sisi, tetapi karena scroll-snap-align Ditetapkan menjadi "start", sehingga hanya marjin puncak yang berubah dalam perilaku penarikan.

Contoh

Contoh 1

Atur marjin penarikan dari kontainer ke lokasi serapan ke 20px:

div {
  scroll-padding: 20px;
}

Coba sendiri

Contoh 2: Pustaka gambar

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

#container {
  scroll-padding: 30px 0 0 0;
}
Elemen puncak yang tetap
北京 舞者 武汉 郁金香 杭州

Coba sendiri

Contoh 3: Atur marjin penarikan dasar dan sisi kanan

scroll-padding Atribut dapat diatur di dasar dan sisi kanan kontainer secara bersamaan. Bergerak horisontal dan vertikal ke elemen berikutnya untuk melihat efek:

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





Coba sendiri

CSS 语法

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

Nilai atribut

Nilai Deskripsi
auto Nilai baku. Peramban menghitung marjin penarikan.
length

Tentukan marjin penarikan dalam satuan px, pt, cm, dll.

Tidak diizinkan untuk menggunakan nilai negatif. Lihat:CSS 单位。
% Tentukan jarak marjin dalam persen yang berhubungan dengan lebar elemen pengandung.
initial Atur atribut ini ke nilai baku. Lihat initial。
inherit Mengambil atribut ini dari elemen induknya. Lihat inherit。

Detil teknis

Nilai baku： auto
Keretribosan： Tidak
Pembuatan animasi： Tidak didukung. Lihat:Atribut berhubungan dengan animasi。
Versi： CSS3
语法 JavaScript： object.style.scrollPadding="20px"

Dukungan peramban

Angka di dalam tabel menunjukkan versi peramban yang sepenuhnya mendukung atribut ini.

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

Halaman berkenaan

Rujukan：Sifat scroll-padding-bottom CSS

Rujukan：Sifat scroll-padding-left CSS

Rujukan：Sifat scroll-padding-right CSS

Rujukan：Sifat scroll-padding-top CSS

Rujukan：Sifat scroll-snap-align CSS

Rujukan：Sifat scroll-snap-type CSS