ປະເພດ scroll-margin-inline-end

定义和用法

scroll-margin-inline-end 属性指定在行内方向上，吸附位置与容器之间的距离。

这意味着，当你停止滚动时，滚动会快速调整并在行内方向上停在指定的距离处，这个距离是指子元素末端的吸附位置与容器之间的距离。

行内方向是指下一字符相对于现有字符在行中的位置放置的方向，这也是具有 CSS display: inline; 的标签（如 和 标签）在文本中的布局方式。行内方向取决于书写语言，例如阿拉伯语的新字符是从右到左排列的，因此行内方向是从右到左的，而英文页面的行内方向是从左到右的。行内方向可以通过 CSS 属性 direction ແລະ writing-mode ການອະທິບາຍ。

ການວາງຕອນວັດຖຸຂອງການກະຕຸບແມ່ນຄືກັບບ່ອນທີ່ທີ່ທ່ານຢຸດການຫຼິ້ນສະໝອງທີ່ສິນລະປິນຢູ່ໃນບັນດາສິນລະປິນໃນບັນດາບັນນາທິການ。

ຫນັງ:ບາດຫົວນັ້ນພຽງແຕ່ໄດ້ກໍານົດໃນວິທະຍາຍິງອາຍິນ. scroll-snap-align ບາດຫົວທີ່ 'end' ກໍ່ຈະມີຜົນ.

ເພື່ອໄດ້ເຫັນຜົນຂອງບາດຫົວ. scroll-margin-inline-end ບາດຫົວ scroll-margin-inline-end ແລະ scroll-snap-align ບາດຫົວ scroll-snap-type ບາດຫົວ.

CSS scroll-margin-inline ແລະ scroll-margin-block ບາດຫົວກັບ CSS ປະເພດ scroll-margin-topຢູ່scroll-margin-bottomຢູ່scroll-margin-left ແລະ scroll-margin-right ຄືກັນຫຼາຍຢ່າງ ແຕ່ scroll-margin-block ແລະ scroll-margin-inline ບາດຫົວນັ້ນສາມາດຈະຕິດຕໍ່ວິທະຍາຍິງຫົວແລະວິທະຍາຍິງບົດກິດຈະການ.

ບົດຫນັງ

ບົດທີ 1

ການກໍານົດຄວາມໄລຍະທີ່ຢູ່ບົດກິດຈະການຈາກຈຸດຫັກຈົນເຖິງສາງທີ່ສາມາດຄົບຄວາມສາມາດທົບໄບ.

div {
  scroll-margin-inline-end: 20px;
}

ທຳການທົດລອງອາດຕັ້ງແຕ່ຕົ້ນ.

ບົດທີ 2

ຖ້າປະກອບຫົວ <div> writing-mode ຖ້າປະກອບຫົວຕັ້ງແຕ່ vertical-rl ການເລັ່ງການອາຍິນໃນບົດກິດຈະການແມ່ນຍິນລົງ. ຜົນຄວາມຈິງແມ່ນຫົວຂໍ້ອາຍິນຈະຍ້າຍຈາກຊ້າຍໄປດ້ານລຸ່ມ:

div {
  scroll-margin-inline-end: 20px;
  writing-mode: vertical-rl;
}

ທຳການທົດລອງອາດຕັ້ງແຕ່ຕົ້ນ.

ບົດທີ 3

ຖ້າປະກອບຫົວ <div> direction ບໍ່ມີການກໍານົດຄູ່ມົງມາ rtl ການເລັ່ງການອາຍິນໃນບົດກິດຈະການແມ່ນຈາກຊ້າຍໄປຊາຍ. ຜົນຄວາມຈິງແມ່ນຫົວຂໍ້ອາຍິນຈະຍ້າຍຈາກຊ້າຍໄປຊາຍ:

div {
  scroll-margin-inline-end: 20px;
  direction: rtl;
}

ທຳການທົດລອງອາດຕັ້ງແຕ່ຕົ້ນ.

ສັບພາສາ CSS:

scroll-margin-inline-end: 0|value|initial|inherit;

ຄູ່ມົງມາວ່າ

ຈຳນວນ ການອະທິບາຍ
0 ຄູ່ມົງມາເປັນພາສາທຳມະດາ. ຈຳນວນຄວາມໄລຍະ scroll-margin-inline-end ຄົນທີ່ຢູ່ໃນປະກອບຫົວ.
length

ການກໍານົດຄວາມໄລຍະທີ່ຢູ່ວ່າ px, pt, cm ແລະອື່ນໆ. ອະນຸຍາດນຳໃຊ້ຄືນ.

ບັນທຶກຢູ່:ຄູ່ມວນຊົນ CSS ທີ່ຄຳການຈຳນວນ.
initial ການປ່ຽນຄືນບາດຫົວຕາມຄູ່ມົງມາເປັນພາສາທຳມະດາ. ບັນທຶກຢູ່: initial.
inherit ການຮັບພີມຈາກປະກອບຫົວເພາະ. ບັນທຶກຢູ່: inherit.

ຂໍ້ມູນດ້ານເຕັກນິກ

ຄູ່ມົງມາເປັນພາສາທຳມະດາ: 0
ການຮັບພີມ: ບໍ່
ການສ້າງອາກາດ: ບໍ່ສາມາດນຳໃຊ້. ບັນທຶກຢູ່:ບາດຫົວການສະແດງອາກາດ.
ລະບົບທີ່ຢູ່: CSS3
ສັບພາສາ JavaScript: object.style.scrollMarginInlineEnd="20px"

ການສະໜັບສະໜູນບັນດາອຸປະກອນ

ຈຳນວນທີ່ຢູ່ໃນຕາລະບົດສະແດງວ່າ ລະບົບຈູດຊັບທີ່ເປັນທີ່ສະຫຼາດທຳອິດທີ່ສະໜັບສະໜູນບາດຫົວນັ້ນ.

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

ບົດສະຫຼົມ

参考：ປະເພດ CSS direction

参考：ປະເພດ scroll-snap-align

参考：ປະເພດ scroll-snap-type

参考：ປະກາດຄູ່ມຸມການສະແດງຂອງມັນ writing-mode