ລະບຽບ CSS scroll-padding-inline-end

ການກໍານົດ ແລະ ການນໍາໃຊ້.

scroll-padding-inline-end ລະບົບນີ້ກໍານົດຄວາມຫ່າງລະຫວ່າງວົງກາງ ແລະ ຈຸດຕິດຕັ້ງຂອງຫຼັກສ່ວນລຸ່ມໃນລະບົບການສັບສົນ.

ນີ້ໝາຍຄວາມວ່າ, ເມື່ອເຈົ້າຢຸດການໝູນໂຄງພະຍາຍາມ, ໝູນໂຄງຈະພັດພະຍາຍາມໄປຕາມຈຸດຕິດຕັ້ງຂອງຕັຖສິນລະບົບ ແລະ ຈຸດຫຼັງທີ່ມີການກໍານົດທີ່ຈະຢູ່ລະຫວ່າງຕັຖສິນລະບົບ ແລະ ວົງກາງ.

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

ຕັຖສິນລະບົບແມ່ນການຈັດຕັ້ງການຕິດຕັ້ງຂອງຫຼັກສ່ວນລຸ່ມຕາມລຳດັບທີ່ເຈົ້າຢຸດການໝູນໂຄງພະຍາຍາມ.

ຄວາມຕ້ອງເຂົ້າໃຈ:ລະບົບນີ້ພຽງແຕ່ທີ່ scroll-snap-align ລະບົບສະຖານະພາບຂອງການສັບສົນຕາມລຳດັບ '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;

ຄູ່ມືທາງວັດສະດຸ

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

ການສະໜັບສະໜູນຍົນພາບ

ຈຳນວນຕົວເລກໃນຕາຕະລາງສະແດງວ່າລະບົບຍົນພາບທີ່ເປັນຜູ້ສະໜັບສະໜູນລະບົບປະສົມສຳລັບລະບົບນັ້ນ.

ບັນດາໜ້າທີ່

ກ່ຽວກັບ:ປະເພດ CSS direction

ກ່ຽວກັບ:ລະບຽບ CSS scroll-snap-align

ກ່ຽວກັບ:ລະບຽບ CSS scroll-snap-type

ກ່ຽວກັບ:ບັນດາຄູ່ມີຄວາມສົນໃຈ writing-mode