ປະເພດ scroll-margin-inline CSS

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

scroll-margin-inline ປະສົມຄວາມສະຫຼາດຕັ້ງການຈຸດຕັ້ງການກັບຫົວອົງປະກອບລຸ່ມຫົວອົງປະກອບລຸ່ມໃນວິທີການປະກອບອົງປະກອບລຸ່ມ.

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

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

ຄວາມຕັ້ງການກັບຈຸດຕິດຕັ້ງແມ່ນຈຸດທີ່ປະກອບອົງປະກອບລຸ່ມຫົວອາກາດຕິດຕັ້ງໃນຫົວອົງປະກອບລຸ່ມເມື່ອປະກອບອົງປະກອບລຸ່ມຢຸດການໄຫຼວົງວຽງ.

scroll-margin-inline ປະສົມຄວາມສະຫຼາດນີ້ແມ່ນປະກອບສະຫຼາດຂອງປະສົມຄວາມດັ່ງກ່າວ:

scroll-margin-inline ຄຸນະພາບຂອງປະສົມຄວາມສາມາດກວດສອບໃນວິທີຫຼາກຫຼາຍ:

ຖ້າປະສົມຄວາມ scroll-margin-inline ມີຄຸນະພາບສອງ:

scroll-margin-inline: 20px 70px;
  • ຄວາມຫ່າງຈຸດເລີ່ມ 20px
  • ຄວາມຫ່າງຈຸດສິ້ນມັນ 70px

ຖ້າປະສົມຄວາມ scroll-margin-inline ມີຄຸນນະພາບໜຶ່ງ:

scroll-margin-inline: 20px;
  • ຄວາມຫ່າງຈາກຈຸດເລີ່ມແລະຈຸດສິ້ນມັນ 20px

ຕ້ອງໄດ້ເຫັນ scroll-margin-inline ຜົນຂອງປະສົມຄວາມຕ້ອງຖືກກວດສອບໃນປະກອບອົງປະກອບລຸ່ມ scroll-margin-inline 和 scroll-snap-align 属性，并在父元素上设置 scroll-snap-type 属性。

CSS 的 scroll-margin-inline 和 scroll-margin-block 属性与 CSS 属性 ປະເພດ scroll-margin-top CSS、scroll-margin-bottom、scroll-margin-left 和 scroll-margin-right 非常相似，但 scroll-margin-block 和 scroll-margin-inline 属性依赖于块方向和行内方向。

实例

例子 1

设置在行内方向上，从吸附位置到可滚动容器的距离：

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

亲自试一试

例子 2

当 <div> 元素的 writing-mode 属性值设置为 vertical-rl 时，行内方向是向下。结果是元素的起始位置从左侧移动到顶部，元素的结束位置从右侧移动到底部。这也影响了 scroll-margin-inline 属性：

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

亲自试一试

例子 3

当 <div> 元素的 direction 属性值设置为 rtl 时，行内方向是从右到左。结果是元素的起始位置从左侧移动到右侧，元素的结束位置从右侧移动到左侧。这也影响了 scroll-margin-inline 属性：

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

亲自试一试

CSS 语法

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

属性值

值 描述
0 默认。元素的默认 scroll-margin-inline 距离。
length

指定以 px、pt、cm 等单位的距离。允许使用负值。

请参阅：ຄູ່ມືການຄົ້ນຄວ້າສິບລາງ CSS。
initial 将此属性设置为其默认值。参阅 initial。
inherit 从其父元素继承此属性。参阅 inherit。

技术细节

默认值： 0
继承性： 否
动画制作： 不支持。请参阅：动画相关属性。
版本： CSS3
JavaScript 语法： object.style.scrollMarginInline="20px"

浏览器支持

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

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

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

ກ່ຽວກັບຄວາມສະແດງກະດັບ direction CSS

ກ່ຽວກັບປະເພດ scroll-margin-inline-end CSS

ກ່ຽວກັບປະເພດ scroll-margin-inline-start CSS

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

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

ກ່ຽວກັບປະກອບປະສົມ writing-mode