Properti scroll-padding-inline-end CSS

Definisi dan penggunaan

scroll-padding-inline-end Properti menentukan jarak di arah baris dalam antara ujung kontainer dan posisi penyejajaran elemen anak.

Artinya, saat penggerakan berhenti, penggerakan akan segera menyesuaikan dan berhenti di jarak yang ditentukan antara posisi penyejajaran dan kontainer.

Arah baris dalam adalah arah penempatan karakter berikutnya terhadap karakter yang ada di baris, yang juga adalah cara penataan tampilan tag yang memiliki CSS display: inline; seperti tag <a> dan <strong> di teks. Arah baris dalam tergantung pada bahasa penulisan, misalnya karakter bahasa Arab diatur dari kanan ke kiri, jadi arah baris dalam adalah dari kanan ke kiri, sementara arah baris dalam halaman bahasa Inggris adalah dari kiri ke kanan. Arah baris dalam dapat diatur melalui atribut CSS direction dan writing-mode Definisi.

Posisi penyejajaran adalah posisi tempat elemen anak berada di tempatnya di kontainer saat penggerakan berhenti.

Perhatian:Properti ini hanya berlaku di scroll-snap-align Properti hanya berlaku saat pengaturan arah dalam baris diatur menjadi 'end'.

untuk melihat scroll-padding-inline-end pada elemen anak untuk memperlihatkan efek scroll-snap-align properti, dan atur properti scroll-padding-inline-end dan scroll-snap-type Properti.

Contoh

Contoh 1

Atur pengisian luaran arah inline dari ujung kontainer ke posisi aligasi 20px:

div {
  scroll-padding-inline-end: 20px;
}

Coba sendiri

Contoh 2: Pustaka gambar

scroll-padding-inline-end Properti dapat digunakan di galleri gambar yang memiliki perilaku aligasi untuk menekan gambar dari elemen yang tetap:

#container {
  scroll-padding-inline-end: 30px;
}

Coba sendiri

Contoh 3

Ketika elemen kontainer writing-mode Ketika nilai properti disetel ke 'vertical-rl', arah inline container dan elemen anak akan bergerak dari kiri ke atas, sementara ujungnya akan bergerak dari kanan ke bawah. Ini akan mempengaruhi perilaku aligasi penarikan dan scroll-padding-inline-end Cara kerja properti:

#container {
  scroll-padding-inline-end: 20px;
  writing-mode: vertical-rl;
}

Coba sendiri

Contoh 4

Ketika elemen kontainer direction Ketika nilai properti disetel ke 'rtl', arah inline container dan elemen anak akan bergerak dari kanan ke kiri. Ini akan mempengaruhi perilaku aligasi penarikan dan scroll-padding-inline-end Cara kerja properti:

#container {
  scroll-padding-inline-end: 20px;
  direction: rtl;
}

Coba sendiri

Syntaks CSS

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

Nilai properti

Detil teknis

dukungan browser

angka di tabel menunjukkan versi browser yang sepenuhnya mendukung properti ini.

halaman yang relevan

Referensi：Atribut direction CSS

Referensi：Properti scroll-snap-align CSS

Referensi：Properti scroll-snap-type CSS

Referensi：Atribut writing-mode CSS