Atribut scroll-padding-inline CSS

Definisi dan penggunaan

scroll-padding-inline properti menentukan jarak dari kontainer ke posisi penarik elemen anak di arah dalam.

ini berarti saat Anda berhenti menggulir, penarikan akan menyesuaikan dan berhenti di jarak yang ditentukan antara posisi penarik dan kontainer.

arah dalam adalah arah tempat karakter berikutnya akan ditempatkan di atas karakter yang sudah ada di baris. Ini juga cara tag yang memiliki CSS display: inline; (seperti tag <a> dan <strong>) disusun di dalam teks. Arah dalam tergantung pada bahasa tulis, misalnya karakter bahasa Arab diatur dari kanan ke kiri, sehingga arah dalam adalah dari kanan ke kiri, sementara halaman Inggris memiliki arah dalam dari kiri ke kanan. Arah dalam dapat diset melalui properti CSS direction 和 writing-mode untuk mendefinisikan.

posisi penarik adalah posisi dimana elemen anak di dalam kontainer menarik ke tempat saat Anda berhenti menggulir.

Perhatian:ini hanya berlaku di arah dalamscroll-snap-align properti berlaku hanya saat nilai 'start' atau 'end'.

properti scroll-padding-inline adalah singkatan properti berikut:

• scroll-padding-inline-start
• scroll-padding-inline-end

scroll-padding-inline nilai properti dapat diset dengan berbagai cara:

jika properti scroll-padding-inline memiliki dua nilai:

scroll-padding-inline: 10px 50px;

• jarak awal sebanyak 10px
• jarak akhir sebanyak 50px

jika properti scroll-padding-inline memiliki nilai:

scroll-padding-inline: 10px;

• jarak awal dan akhir sebanyak 10px

untuk melihat scroll-padding-inline efek properti, harus diset di elemen anak scroll-snap-align properti, dan tetapkan di elemen induk scroll-padding-inline 和 scroll-snap-type properti.

properti CSS scroll-padding-block 和 scroll-padding-inline properti dengan properti CSS Atribut scroll-padding-top CSS、scroll-padding-bottom、scroll-padding-left 和 scroll-padding-right 非常相似，但 scroll-padding-block 和 scroll-padding-inline 属性依赖于块方向和行内方向。

实例

例子 1

设置行内方向上的滚动内边距，从容器到吸附位置为 20px：

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

亲自试一试

例子 2：图片库

在具有吸附行为的图片画廊中，可以使用 scroll-padding-inline 属性将图片从固定元素后面推出：

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

亲自试一试

例子 3

当容器元素的 writing-mode 属性值设置为 'vertical-rl' 时，行内方向上的容器和子元素的起始位置从左侧移动到顶部，结束位置从右侧移动到底部。这会影响滚动吸附行为以及 scroll-padding-inline 属性的工作方式：

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

亲自试一试

例子 4

当容器元素的 direction 属性值设置为 'rtl' 时，行内方向上的容器和子元素的起始位置从右侧移动到左侧。这会影响滚动吸附行为以及 scroll-padding-inline 属性的工作方式：

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

亲自试一试

CSS 语法

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

属性值

技术细节

浏览器支持

表格中的数字表示首个完全支持该属性的浏览器版本。

页面相关

Referensi：Atribut direction CSS

Referensi：Atribut scroll-snap-align CSS

Referensi：Atribut scroll-snap-type CSS

Referensi：Atribut writing-mode CSS