ລະບົບ scroll-margin-block CSS
- ຫນ້າທີ່ຫຼັງ scroll-margin
- ຫນ້າທີ່ໜ້າ scroll-margin-block-end
ການອະທິບາຍ ແລະ ການນໍາໃຊ້
scroll-margin-block ຄະນະພາບຈະກຳນົດຄວາມຫ່າງທີ່ກຳນົດກັນລະຫວ່າງຕຳແຫນ່ງຈອດຕຳນອງ (snap position) ແລະບໍລິສັດໃນທາງວົງວຽນ.
ນີ້ໝາຍຄວາມວ່າ ເມື່ອທ່ານຢຸດການສະໝັກ, ການສະໝັກຈະພັດພະຍາຍາມແລະຢຸດຢູ່ທີ່ຄວາມຫ່າງທີ່ກຳນົດກັນລະຫວ່າງຕຳແຫນ່ງຈອດຕຳນອງທີ່ມິວດາ ແລະບໍລິສັດ.
ທາງວົງວຽນແມ່ນທາງທີ່ທ່ານຈະວາງອີກມາຈາກຕຳແຫນ່ງທີ່ມີຕຳແຫນ່ງການວົງວຽນທີ່ມິວດາ; ບັນດາອັນສັດທີ່ມີ CSS display: block; (ເຊັ່ນ <p> ແລະ <div> ອັນສັດ) ຈະວາງອິກມາໃນຕຳແຫນ່ງທີ່ມິວດາຂອງເວັບໄຊ. ທາງວົງວຽນຈະມີຄວາມຄິດທີ່ຕາມພາສາຂອງພິມ, ເຊັ່ນ ພາສາມູນກະຈາຍມາຈາກຊ້າຍໄປຊາຍ, ດັ່ງນັ້ນທາງວົງວຽນຈະມິວດາຈາກຊາຍໄປຊາຍ, ແຕ່ໃນເວັບໄຊພາສາອັງກິດທາງວົງວຽນຈະມິວດາລົງມາ. writing-mode ທີ່ພົບ.
ຕຳແຫນ່ງການຈອດຕຳນອງແມ່ນຕຳແຫນ່ງທີ່ບັນດາປະກອບຂອງລູກຄັນຈະຈອດຕຳນອງໃນບໍລິສັດເມື່ອທີ່ທ່ານຢຸດການສະໝັກ:
ເຫັນດີ:ຄະນະພາບນີ້ມີພຽງແຕ່ໃນທາງບາງການຂອງຊັ້ນສາມາດ: scroll-snap-align ຄະນະພາບຈະມີຜົນງານຖ້າກວດກາຈະເປັນ 'start' ຫຼື 'end'.
scroll-margin-block ຄະນະພາບແມ່ນຄວາມລະອຽດຂອງຄະນະພາບທີ່ຢູ່ເທິງ:
scroll-margin-block ຄູ່ມູນຂອງຄະນະພາບສາມາດກວດກາໄດ້ໂດຍຫຼາຍວິທີ:
ຖ້າມີຄູ່ມູນ scroll-margin-block ທັງສອງຄັນ:
scroll-margin-block: 10px 50px;
- 开始处的距离为 10px
- 结束处的距离为 50px
如果 scroll-margin-block 属性有一个值：
scroll-margin-block: 10px;
- 开始处和结束处的距离均为 10px
要看到 scroll-margin-block 属性的效果，必须在子元素上设置 scroll-margin-block 和 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-block: 10px;
}
例子 2
当子元素的 writing-mode 属性值设置为 vertical-rl 时，元素在块方向的起始位置从顶部移动到右侧，结束位置从底部移动到左侧。这会影响滚动吸附行为以及 scroll-margin-block 属性的工作方式：
div {
scroll-margin-block: 20px 0;
writing-mode: vertical-rl;
}
CSS 语法
scroll-margin-block: 0|value|initial|inherit;
属性值
| 值 | 描述 |
|---|---|
| 0 | 默认。元素的默认 scroll-margin-block 值。 |
| length |
指定以 px、pt、cm 等为单位的距离。允许负值。 请参阅：ມາດຕະຖານມືຖືບັນຊີ。 |
| initial | 将此属性设置为其默认值。参阅 initial。 |
| inherit | 从其父元素继承此属性。参阅 inherit。 |
技术细节
| 默认值： | 0 |
|---|---|
| 继承性： | 否 |
| 动画制作： | 不支持。请参阅：动画相关属性。 |
| 版本： | CSS3 |
| JavaScript 语法： | object.style.scrollMarginBlock="20px" |
浏览器支持
表格中的数字表示首个完全支持该属性的浏览器版本。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 69.0 | 79.0 | 68.0 | 14.1 | 56.0 |
相关页面
ກ່ຽວກັບ:ລະບົບ scroll-margin-block-end CSS
ກ່ຽວກັບ:ລະບົບ scroll-margin-block-start CSS
ກ່ຽວກັບ:ຄວາມຜົນງານ scroll-snap-align CSS
ກ່ຽວກັບ:ຄວາມຜົນງານ scroll-snap-type CSS
ກ່ຽວກັບ:ປະກາດການປ່ຽນປ່າວຂອງຂໍ້ຄວາມ CSS
- ຫນ້າທີ່ຫຼັງ scroll-margin
- ຫນ້າທີ່ໜ້າ scroll-margin-block-end
