ລະບຽບ CSS scroll-padding-bottom

定义和用法

scroll-padding-bottom 属性指定从容器底部到子元素吸附位置的距离。

吸附位置是指当你停止滚动时，子元素在容器中吸附到位的位置。吸附位置通过 scroll-snap-align 属性设置，但也可能受到 CSS 属性 direction 和 writing-mode 的影响。

注意：此属性仅在吸附位置设置在子元素底部时才有效。

要看到 scroll-padding-bottom 属性的效果，必须在子元素上设置 scroll-snap-align 属性，并在父元素上设置 scroll-padding-bottom 和 scroll-snap-type ປະສົມປະສານ

ປະສົມປະສານ

ຄວາມນັບສະນັບ

ກໍລະນີ 1

ຕັ້ງ scroll-padding-bottom ຈາກລູກມັດມາຕອນກາງລູກມັດຈາກ 20px:
  div {
}

ທົດລອງດາວນີ້

scroll-padding-bottom: 20px;

ກໍລະນີ 2: ການສ້າງສະຖານນະນິວັນ scroll-padding-bottom ປະສົມປະສານອາວຸດຈະຕົວກັບບັນດາປະກອງລູກມັດ:

#container {
  scroll-padding-bottom: 30px;
}

ທົດລອງດາວນີ້

ກໍລະນີ 3: ຕັ້ງການຕົວຕອນກາງການສະແດງ

ຖ້າຕັ້ງການກັບບັນດາປະສານການກັບບັນດາປະກອງລູກມັດ, ກໍ່ສາມາດຕັ້ງການກັບບັນດາປະກອງລູກມັດ: scroll-padding-bottom ການສະແດງການສະແດງຕົວອາວຸດທີ່ຕາມການສະແດງຕົວທີ່ຕໍ່ໄປເພື່ອເບິ່ງຜົນງານ:

#container {
  scroll-padding-bottom: 30px;
}

ທົດລອງດາວນີ້

ກໍລະນີ 4: ຕັ້ງການກັບບັນດາປະກອງລູກມັດ

ເພື່ອສະແດງ: scroll-padding-bottom ປະສົມປະສານອາວຸດຈະມີຜົນງານ, ຕັ້ງການກັບບັນດາປະກອບປະກອງລູກມັດກັບຊ້າຍມັດກາງ. ໃນກໍລະນີນີ້,writing-mode ປະສົມປະສານອາວຸດຈະປ່ຽນຕັ້ງການກັບບັນດາປະກອບປະກອບລູກຈາກຊ້າຍມັດກາງລູກມັດກັບຊ້າຍມັດກາງ. ບໍ່ດັ່ງນັ້ນ,scroll-padding-bottom ປະສົມປະສານອາວຸດຈະບໍ່ມີຜົນງານ:

#container {
  writing-mode: vertical-rl;
  scroll-padding-bottom: 30px;
}
#container > div {
  scroll-snap-align: end none;
}

ທົດລອງດາວນີ້

ສັບພາສາ CSS

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

ຄູ່ມູນຂອງປະສົມປະສານ

ລາຍລະອຽດດ້ານເຕັກນິກ

ການສະຫຼຸບບັນບານອາວຸດ

ຈຳນວນໃນຕາຕະລາງສະແດງການສະຫຼຸບການສະຫຼຸບຂອງຜູ້ບັນຈຸທີ່ເປັນຜູ້ບັນຈຸທີ່ໃຫ້ການສະຫຼຸບຄັດທີ່ໂດດດາວນີ້.

ບຳບັດຂອງຂໍ້ມູນ

参考：ລະບົບຄິມານອັນ direction

参考：ລະບຽບ CSS scroll-snap-align

参考：ລະບຽບ CSS scroll-snap-type

参考：ລະບົບສະພາບຄຳສັບ writing-mode