ບັນດາວິທະຍາສາດ CSS scroll-padding-left

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

scroll-padding-left ສະບາຍກຳນົດຄວາມໄລຍະຈາກທາງຊ້າຍຂອງຕາມການຖອກຕິດຢູ່ຫາຕັ້ງການຖອກຕິດຢູ່ຂອງປະກອບ.

ຕັ້ງການຖອກຕິດຢູ່ແມ່ນສະຖານທີ່ປະກອບລູກຕິດຢູ່ທີ່ອຸດົມຢູ່ຂອງຕາມການຖອກຕິດຢູ່ຫຼັງຈາກທີ່ຖອກຕິດ.

ຕັ້ງການຖອກຕິດຢູ່ແມ່ນສະຖານທີ່ປະກອບລູກຕິດຢູ່ທີ່ອຸດົມຢູ່ຂອງຕາມການຖອກຕິດຢູ່ຫຼັງຈາກທີ່ຖອກຕິດ. scroll-snap-align ການຕັ້ງຂອງສະບາຍນີ້ກໍ່ຕາມກໍ່ສາມາດຖືກກະທົບໂດຍສະບາຍ CSS. direction 和 writing-mode ມີຜົນກະທົບ.

ຫັງການ:ນີ້ສະບາຍພຽງແຕ່ຖ້າຕັ້ງການຖອກຕິດຢູ່ຂອງປະກອບອີກຊົງຢູ່ທາງຊ້າຍຂອງປະກອບລູກ.

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

实例

例子 1

ຈະຕັ້ງທີ່ຈະກັບຕັ້ງຈາກຊ້າຍຂອງບັນດາກອງໄປເປັນທີ່ຈະກັບຕັ້ງ 20px:

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

ທົດລອງດີຕະຫຼອດ

ກໍລະນີ 2: ສະຖານນີຮູບພາບ

scroll-padding-left ຄູ່ມືຈະນຳໃຊ້ໃຫ້ບັນດາຮູບຮ່າງທີ່ມີການຈະກັບຕັ້ງເພື່ອຍົກຍ້າຍຮູບຈາກປະກອງຕັ້ງທີ່ຫົວໃຫຍ່ເຂົ້າໃນເບິ່ງສະແດງ:

#container > img {
  scroll-padding-left: 30px;
}

ທົດລອງດີຕະຫຼອດ

ກໍລະນີ 3: ຕັ້ງທີ່ຈະກັບຕັ້ງໃນຊ້າຍ

ເມື່ອຈະຕັ້ງທີ່ຈະກັບຕັ້ງໃນສອງທິດ, ຈະສາມາດຕັ້ງທີ່ຈະກັບຕັ້ງໃນບັນດາບັນດາກອງ: scroll-padding-left ຄູ່ມື. ບັນທຶກການບັນທຶກທີ່ຈະກັບຕັ້ງເພື່ອເບິ່ງຜົນງານ:

#container > div {
  scroll-padding-left: 30px;
}

ທົດລອງດີຕະຫຼອດ

ກໍລະນີ 4: ຕັ້ງທີ່ຈະກັບຕັ້ງ

ເພື່ອສ້າງ: scroll-padding-left ຄູ່ມືຈະມີຜົນງານ, ຕຳນານຕັ້ງທີ່ຊ້າຍຂອງປະກອນລູກຕ້ອງໄດ້ຕັ້ງໃນຊ້າຍ. ໃນກໍລະນີດັ່ງກ່າວ,direction ຄູ່ມື 'rtl' ຈະປ່ຽນຕາກັນທີ່ຈະກັບຕັ້ງທີ່ຊ້າຍຂອງປະກອນລູກໄປເປັນຊ້າຍ. ເມື່ອໃຊ້ລະຫັດດັ່ງກ່າວ,scroll-padding-left ບັນດາປະສົມປະສານຈະບໍ່ມີຜົນງານ:

#container {
  direction: rtl;
  scroll-padding-left: 30px;
}
#container > div {
  scroll-snap-align: none start;
}

ທົດລອງດີຕະຫຼອດ

ສັບພາສາ CSS

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

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

ຄູ່ມື ອະທິບາຍ
auto ຄູ່ມືສົມບູນ. ບັນດາບັນນາທິການຈະຕັ້ງຂໍ້ຂັດແຍ່ງ.
length

ຈະຕັ້ງໃນຕາມຈຳນວນ px, pt, cm ຄືກັນ.

ບໍ່ອາດນຳໃຊ້ຄູ່ມືລົດສະຫຼາກ. ເບິ່ງ:ປະສົມປະສານ CSS Unit.
% ຈະຕັ້ງຄວາມກວມຂອງປະກອນຕັ້ງໃນບໍ່ທັນຄົບທີ່ມີຂະໜາດຂອງປະກອນ.
initial ຈະຕັ້ງຂໍ້ຂັດແຍ່ງຂອງປະສົມປະສານໃຫ້ເປັນຄູ່ມືສົມບູນ. ເບິ່ງ: initial.
inherit ຈະຍັງຕິດຕາມປະສົມປະສານຂອງປະກອບປະກອນພໍ່. ເບິ່ງ: inherit.

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

ຄູ່ມືສົມບູນ: auto
ການສ້າງຕົ້ນ: ບໍ່
ການສ້າງອິນສະໄຫມ: ບໍ່ສາມາດນຳໃຊ້. ບັນດາການ:ປະສົມປະສານທາງອິນສະໄຫມ.
ສະຖານະ: CSS3
ສັບພາສາ JavaScript: object.style.scrollPaddingLeft="20px"

ການສະໜັບສະໜູນບັນດາບັນນາທິການ

ຈຳນວນໃນຕາຕະລາງອອກສະແດງການອາດຕະການບໍ່ທັນຄົບທີ່ສຸດຂອງບັນດາບັນນາທິການທີ່ສະໜັບສະໜູນປະສົມປະສານດັ່ງກ່າວ

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

ເວັບໄຊທີ່ກ່ຽວຂ້ອງ

参考：ຄວາມລະບຸຫົວຂໍ້ຖານໂນໂລຊີ CSS direction

参考：ບັນດາວິທະຍາສາດ CSS scroll-snap-align

参考：ບັນດາວິທະຍາສາດ CSS scroll-snap-type

参考：ບັນດາຄວາມຂອງ CSS writing-mode