Sifat scroll-padding-block CSS

definisi dan penggunaan

scroll-padding-block properti menentukan jarak dari wadah ke posisi tanggung jawab elemen anak di arah blok.

ini berarti, saat Anda berhenti menggulir, pengguliran akan segera mengatur dan berhenti di jarak yang ditentukan di antara posisi tanggung jawab dan wadah di arah blok.

arah blok adalah arah penempatan baris berikutnya berdasarkan posisi baris yang ada, ini juga cara tata letak tanda baca yang memiliki CSS display: block; seperti tanda baca <p> dan <div> di halaman. Arah blok tergantung pada bahasa tulis, contohnya, di bahasa Mongolia baris baru diatur dari kiri ke kanan, jadi arah blok juga dari kiri ke kanan, sementara halaman Inggris memiliki arah blok ke bawah. Arah blok dapat diatur melalui properti CSS writing-mode untuk mendefinisikan.

posisi tanggung jawab adalah posisi di mana elemen anak diikat ke tempat saat Anda berhenti menggulir.

perhatian:properti ini hanya berlaku di arah blok,scroll-snap-align properti berlaku saat diatur 'start' atau 'end'.

scroll-padding-block properti adalah singkatan dari properti berikut:

• scroll-padding-block-start
• scroll-padding-block-end

scroll-padding-block nilai properti dapat diatur dengan berbagai cara:

jika properti scroll-padding-block memiliki 2 nilai:

scroll-padding-block: 10px 50px;

• jarak di awal adalah 10px
• jarak di akhir adalah 50px

jika properti scroll-padding-block memiliki nilai:

scroll-padding-block: 10px;

• jarak di awal dan di akhir adalah 10px

untuk melihat scroll-padding-block kesan properti mesti diatur di elemen anak scroll-snap-align 属性，并在父元素上设置 scroll-padding-block 和 scroll-snap-type 属性。

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

实例

例子 1

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

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

亲自试一试

例子 2：图片库

scroll-padding-block 属性可以用于具有吸附行为的图片画廊，以将图片推到固定元素下方：

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

亲自试一试

例子 3

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

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

亲自试一试

CSS 语法

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

属性值

技术细节

浏览器支持

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

相关页面

参考：Sifat scroll-padding-block-end CSS

参考：Sifat scroll-padding-block-start CSS

参考：Sifat scroll-snap-align CSS

参考：Sifat scroll-snap-type CSS

参考：CSS writing-mode 属性