ບັນດາຄຸນະພາບ CSS scroll-padding-block

ການນຳໃຊ້ແລະຄວາມຄືນ

scroll-padding-block ຄວາມຄືນມູນທີ່ກຳນົດຈຸດທີ່ຈອງມູນຈາກບັນຊີສະຖານທີ່ເປັນຜູ້ລະດັບລຸ່ມເປັນຈຸດວຽງຂອງການກິນຂຶ້ນໃນການຍ້າຍທຳມະດາ

ຄວາມຄືນແມ່ນຈະພັດທະນາຢ່າງຫຼວງຫຼາຍໃນເມື່ອທ່ານຢຸດກິນຂຶ້ນ, ແລະໃນການຍ້າຍທຳມະດາ, ໃນຈຸດທີ່ຈອງມູນທີ່ກຳນົດທີ່ຈຸດວຽງຂອງການກິນຂຶ້ນ ແລະບັນຊີສະຖານທີ່

ການຍ້າຍທຳມະດາແມ່ນທຳມະດາທີ່ທີ່ຕັ້ງຢູ່ຕໍ່ຈຸດທີ່ມີ CSS display: block; (ເຊັ່ນ: <p> ແລະ <div> ການຕັ້ງອອກ) ໃນສະໜາມຂອງເວັບໄຊ. ການຍ້າຍທຳມະດາຂັ້ນນີ້ຈະຕິດຕໍ່ທາງຂອງພາສາຂອງຂ້ອຍ, ເຊັ່ນ: ປະເທດມຸງກະຈາງກະຈຽງວິຫານານິດລົງຈາກທາງຊ້າຍເປັນຈຸດຍ້າຍທຳມະດາທາງຊ້າຍ, ແຕ່ວ່າໃນບັນຊີອັງກິດມີການຍ້າຍທຳມະດາທາງຕົວເຫຼືອ. ການຍ້າຍທຳມະດາຈະຮັບການກຳນົດຜ່ານຄວາມຄືນ CSS writing-mode ມີຄວາມຄືນໃຫ້ກຳນົດ

ຈຸດວຽງຂອງການກິນຂຶ້ນແມ່ນຈຸດທີ່ຜູ້ລະດັບລຸ່ມຈະຖືກຈອງໃນບັນຊີສະຖານທີ່ເມື່ອທ່ານຢຸດກິນຂຶ້ນ

ເຫັນວ່າ:ຄວາມຄືນນີ້ພຽງແຕ່ໃນການຍ້າຍທຳມະດາscroll-snap-align ມີຜົນທີ່ສາມາດນຳໃຊ້ໃນຕອນ 'start' ຫລື 'end'

scroll-padding-block ຄວາມຄືນຕົກລົງກໍ່ແມ່ນຄວາມຄືນຂອງລັກສະນະທີ່:

scroll-padding-block ຄູ່ມູນຂອງປະກອງສາມາດກຳນົດໄດ້ແບບຕ່າງກັນ:

ຖ້າ scroll-padding-block ມີຄູ່ມູນຂອງຄວາມຄືນມູນຊັດສິນສອງຄູ່:

scroll-padding-block: 10px 50px;
  • ລະຫວ່າງຈຸດເລີ່ມມີ 10px
  • ລະຫວ່າງຈຸດຢຸດມີ 50px

ຖ້າ scroll-padding-block ມີຄູ່ມູນຂອງຄວາມຄືນມູນຊັດສິນ:

scroll-padding-block: 10px;
  • ລະຫວ່າງຈຸດເລີ່ມແລະຈຸດຢຸດມີ 10px

ເພື່ອເຫັນ scroll-padding-block ຜົນຂອງປະກອບປະກອງຕ້ອງຖືກກຳນົດໃນຜູ້ລະດັບລຸ່ມ scroll-snap-align 属性，并在父元素上设置 scroll-padding-block 和 scroll-snap-type 属性。

CSS 的 scroll-padding-block 和 scroll-padding-inline 属性与 CSS 属性 ບັນດາຄຸນະພາບ CSS scroll-padding-top、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;

属性值

值 描述
auto 默认值。浏览器计算内边距。
length

以 px、pt、cm 等单位指定 scroll-padding-block。

不允许使用负值。请参阅：ບັນດາຫົວຂໍ້ພິມສະໜັບສະໜູນຕາມຄົນນັກການຄອມພິວເຕິກ。
% 指定包含元素宽度百分比的内边距。
initial 将此属性设置为其默认值。参阅 initial。
inherit 从其父元素继承此属性。参阅 inherit。

技术细节

默认值： auto
继承性： 否
动画制作： 不支持。请参阅：动画相关属性。
版本： CSS3
JavaScript 语法： object.style.scrollPaddingBlock="20px"

浏览器支持

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

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 15.0 56.0

相关页面

参考：ບັນດາຄຸນະພາບ CSS scroll-padding-block-end

参考：ບັນດາຄຸນະພາບ CSS scroll-padding-block-start

参考：ບັນດາຄຸນະພາບ CSS scroll-snap-align

参考：ບັນດາຄຸນະພາບ CSS scroll-snap-type

参考：ປະກາດທີ່ການການຕັດການຄຳຂຽນ CSS