Atribut scroll-padding-inline-start CSS

Definisi dan penggunaan

scroll-padding-inline-start atur jarak dari posisi awal kontainer ke posisi serapan elemen anak di arah baris.

Artinya, saat Anda berhenti menggulir, gulir akan segera menyesuaikan dan berhenti di jarak yang ditentukan antara posisi serapan dan kontainer.

Arah baris adalah arah penempatan karakter berikutnya berhadapan dengan karakter yang ada di dalam baris, ini juga cara tata letak tag yang memiliki CSS display: inline; (seperti tag <a> dan <strong>) di dalam teks. Arah baris tergantung pada bahasa tulis, misalnya karakter Arab diatur dari kanan ke kiri, jadi arah baris adalah dari kanan ke kiri, sementara arah baris di halaman Inggris adalah dari kiri ke kanan. Arah baris dapat diatur melalui atribut CSS direction dan writing-mode definisi.

Posisi serapan adalah posisi dimana elemen anak di dalam kontainer menempel saat Anda berhenti menggulir.

Perhatian:Atribut ini hanya diatur di arah baris scroll-snap-align atribut menjadi 'start' untuk berfungsi.

untuk melihat scroll-padding-inline-start efek atribut, harus diatur di elemen anak scroll-snap-align atur atribut, dan diatur atribut scroll-padding-inline-start dan scroll-snap-type Atribut.

Contoh

Contoh 1

Atur jarak sisian internal geser internal dari posisi awal kontainer ke posisi penempelan di arah inline sebesar 20px:

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

Coba sendiri

Contoh 2: Pustaka gambar

scroll-padding-inline-start Atribut dapat digunakan di galleri gambar yang memiliki perilaku penempelan untuk menyingkirkan gambar dari elemen yang tetap:

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

Coba sendiri

Contoh 3

Ketika elemen kontainer writing-mode Ketika nilai atribut diatur menjadi 'vertical-rl', posisi awal kontainer dan elemen anak mengalami perpindahan dari atas ke kanan. Ini akan mempengaruhi perilaku penempelan geser dan scroll-padding-inline-start Cara kerja atribut:

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

Coba sendiri

Contoh 4

Ketika elemen kontainer direction Ketika nilai atribut diatur menjadi 'rtl', posisi awal kontainer dan elemen anak mengalami perpindahan dari sisi kanan ke kiri, sementara posisi akhir kontainer dan elemen anak dari sisi kanan ke bawah. Ini akan mempengaruhi perilaku penempelan geser dan scroll-padding-inline Cara kerja atribut:

#container {
  scroll-padding-inline-start: 20px;
  diretion: rtl;
}

Coba sendiri

Syntaks CSS

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

Nilai atribut

Detil teknis

Dukungan Browser

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

Halaman yang berhubungan

Referensi：Atribut direction CSS

Referensi：Atribut scroll-snap-align CSS

Referensi：Atribut scroll-snap-type CSS

Referensi：Atribut writing-mode CSS