Atribut scroll-padding-block-start CSS

Definisi dan penggunaan

scroll-padding-block-start Atribut menentukan jarak di arah blok, dari posisi awal kontainer ke posisi tangkap elemen anak.

Artinya, saat Anda berhenti menggulir, penyesuaian gulir akan cepat dan berhenti di jarak yang ditentukan antara posisi tangkap dan kontainer di arah blok.

arah blok adalah referensi posisi terhadap baris yang ada, arah penempatan baris berikutnya. Ini juga cara pengaturan tata letak bagi tag yang memiliki CSS display: block; seperti tag <p> dan <div> di halaman. Arah blok tergantung pada bahasa tulis, misalnya, baris baru dalam bahasa Mongolia diatur dari kiri ke kanan, sehingga arah blok adalah dari kiri ke kanan, sementara arah blok di halaman Bahasa Inggris adalah ke bawah. Arah blok dapat diatur melalui atribut CSS writing-mode untuk menentukan.

Posisi serapan adalah posisi dimana elemen anak diserap ke tempat saat Anda berhenti menggerakkan.

Perhatian:Atribut ini hanya berlaku di arah blok. scroll-snap-align Atribut ini hanya berfungsi saat nilai atribut diatur ke 'start'.

untuk melihat efeknya. scroll-padding-block-start pada elemen anak untuk melihat efeknya, scroll-snap-align Atribut, dan atur atribut scroll-padding-block-start dan scroll-snap-type Atribut.

Contoh

Contoh 1

Atur jarak margin arah blok antara posisi awal kontainer dan posisi serapan ke 20px:

div {
  scroll-padding-block-start: 20px;
}

Coba sendiri

Contoh 2: Pustaka gambar

Dalam galleri gambar yang memiliki perilaku serapan, dapat digunakan scroll-padding-block-start Atribut ini akan menempatkan gambar di bawah elemen yang tetap:

#container {
  scroll-padding-block-start: 30px;
}

Coba sendiri

Contoh 3

Ketika elemen kontainer writing-mode Ketika nilai atribut diatur ke vertical-rl, posisi awal kontainer di arah blok dan elemen anak pindah dari atas ke kanan. Ini akan mempengaruhi perilaku serapan gerakan serta scroll-padding-block-start Cara kerja atribut:

#container {
  scroll-padding-block-start: 20px;
  writing-mode: vertical-rl;
}

Coba sendiri

Syntaks CSS

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

Nilai atribut

Detil teknis

Dukungan Browser

Angka di tabel menunjukkan versi browser yang pertama yang sepenuhnya mendukung atribut ini.

Halaman yang berhubungan

Referensi：Atribut scroll-snap-align CSS

Referensi：Atribut scroll-snap-type CSS

Referensi：Atribut writing-mode CSS