Sifat scroll-padding-inline-end CSS

Definisi dan penggunaan

scroll-padding-inline-end Properti ini menentukan jarak dari ujung kontainer ke posisi penjajaran elemen anak dalam arah dalam baris.

Artinya, saat Anda berhenti berputar, penyerapan akan segera menyesuaikan dan berhenti di jarak yang ditentukan antara posisi penjajaran dan kontainer.

Arah dalam baris adalah arah penempatan karakter berikutnya berbanding dengan karakter yang ada di baris, ini juga cara penataan tanda (seperti tag <a> dan <strong>) dalam teks. Arah dalam baris tergantung pada bahasa tulis, misalnya karakter bahasa Arab diatur dari kanan ke kiri, jadi arah dalam baris adalah dari kanan ke kiri, sementara arah dalam baris halaman Inggris adalah dari kiri ke kanan. Arah dalam baris dapat diatur melalui properti CSS direction 和 writing-mode Definisi.

Posisi penjajaran adalah tempat elemen anak berada di tempat yang sesuai di kontainer saat berhenti berputar.

Perhatian:Properti ini hanya ada di scroll-snap-align Properti ini hanya berfungsi apabila pengaturan arah dalam baris diatur ke 'end'.

要看到 scroll-padding-inline-end 属性的效果，必须在子元素上设置 scroll-snap-align 属性，并在父元素上设置 scroll-padding-inline-end 和 scroll-snap-type 属性。

实例

例子 1

设置从容器末端到对齐位置的行内方向滚动内边距为 20px：

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

亲自试一试

例子 2：图片库

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

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

亲自试一试

例子 3

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

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

亲自试一试

例子 4

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

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

亲自试一试

CSS 语法

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

属性值

技术细节

浏览器支持

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

页面相关

Rujukan：CSS direction 属性

Rujukan：Sifat scroll-snap-align CSS

Rujukan：Sifat scroll-snap-type CSS

Rujukan：Sifat writing-mode CSS