ປະເພດ scroll-padding-inline-start CSS

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

scroll-padding-inline-start ທາງປະສົງຈະກໍານົດຄວາມຫ່າງລະຫວ່າງຕຳແຫນ່ງການກັກຕົວທີ່ຈະຢູ່ທາງຕອນເລີ່ມທີ່ຈະຈັດຕັ້ງບໍລິສັດ.

ນີ້ຫມາຍວ່າຖ້າທ່ານຢຸດການໄຫ�ວົນ, ການໄຫ�ວົນຈະພັດພະຍາຍາມແລະຢຸດຢູ່ທີ່ຄວາມຫ່າງລະຫວ່າງຕຳແຫນ່ງການກັກຕົວກັບບໍລິສັດທີ່ກໍານົດ.

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

ຕຳແຫນ່ງການກັກຕົວແມ່ນສະຖານທີ່ທີ່ຕົວປະຕູຈະກັກຕົວໃນບໍລິສັດເມື່ອທ່ານຢຸດການໄຫຼວົນ.

ຄໍາເຕືອນ:ທາງປະສົງນີ້ຈະຈັດຕັ້ງໃນທາງພາຍໃນ. scroll-snap-align ທາງປະສົງຖືກກໍານົດວ່າ 'start' ຈະກະທັນການປະຕິບັດ.

ເພື່ອເຫັນ scroll-padding-inline-start ທາງປະສົງ ຈັດຕັ້ງໃນປະຕູເມືອງຕ້ອງຈັດຕັ້ງໃນປະຕູເມືອງລູກ scroll-snap-align ທາງປະສົງ ແລະ ຈັດຕັ້ງໃນປະຕູເມືອງ scroll-padding-inline-start ກັບ scroll-snap-type 属性。

实例

例子 1

设置从容器的起始位置到吸附位置在行内方向上的滚动内边距为 20px：

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

亲自试一试

例子 2：图片库

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

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

亲自试一试

例子 3

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

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

亲自试一试

例子 4

当容器元素的 direction 属性值设置为 'rtl' 时，行内方向上容器和子元素的起始位置从右侧移动到左侧，而容器和子元素的结束位置从右侧移动到底部。这会影响滚动吸附行为以及 scroll-padding-inline 属性的工作方式：

#container {
  scroll-padding-inline-start: 20px;
  diretion: rtl;
}

亲自试一试

CSS 语法

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

属性值

技术细节

浏览器支持

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

ບັນດາຫນັງທີ່ກ່ຽວຂ້ອງ

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

ກ່ຽວກັບ:ປະເພດ scroll-snap-align CSS

ກ່ຽວກັບ:ປະເພດ scroll-snap-type CSS

ກ່ຽວກັບ:ປະກາດຄຳສັບສຳນັກງານ writing-mode