CSS scroll-margin-block ทางนักเขียน

การกำหนดและการใช้งาน

scroll-margin-block attribute นี้กำหนดระยะทางระหว่างตำแหน่งที่ติดตั้ง (snap position) ของทางที่เป็นแบบบล็อค (block direction) กับตัวแก้ว.

นี่หมายความว่า เมื่อคุณหยุดเลื่อน การเลื่อนจะปรับตัวเร็วๆและหยุดที่ระยะทางที่กำหนดระหว่างตำแหน่งที่ติดตั้ง (snap position) ของทางที่เป็นแบบบล็อค (block direction) กับตัวแก้ว.

ทางที่เป็นแบบบล็อค (block direction) หมายถึงทางที่ใส่บรรทัดต่อไปที่มีตำแหน่งเดิมของบรรทัดนี้ นี่ก็เป็นวิธีที่แทรกแบบบล็อค (block-level element) อย่างเช่น <p> และ <div> ที่มี CSS display: block; จะจัดวางในหน้าเว็บ. ทางที่เป็นแบบบล็อคขึ้นอยู่กับภาษาการเขียน ตัวอย่างเช่น ภาษามองโกเลียจะจัดบรรทัดใหม่จากซ้ายไปขวา ดังนั้นทางที่เป็นแบบบล็อคก็จะจัดวางจากซ้ายไปขวา ส่วนหน้าเว็บที่ใช้ภาษาอังกฤษมีทางที่เป็นแบบบล็อคไปข้างลง. ทางที่เป็นแบบบล็อคสามารถกำหนดด้วย attribute CSS: writing-mode ที่นี้.

ตำแหน่งที่ติดตั้ง (snap position) หมายถึงตำแหน่งที่เมื่อคุณหยุดเลื่อน ตัวเด็กจะติดตั้งตัวเองในตัวแก้ว.

จำเป็น:คุณสามารถใช้นี้เฉพาะทางที่เป็นแบบบล็อค (block direction) scroll-snap-align มีผลบังคับเมื่อค่าของ attribute ตั้งเป็น 'start' หรือ 'end'.

scroll-margin-block attribute นี้เป็น attribute ที่ย่อของ attribute ดังต่อไปนี้:

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 属性 CSS scroll-margin-top ทิศทางของด้านบน、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 等为单位的距离。允许负值。

请参阅：หน่วยมาตรฐาน CSS。
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

หน้าที่เกี่ยวข้อง

อ้างอิง：CSS scroll-margin-block-end ทางนักเขียน

อ้างอิง：CSS scroll-margin-block-start ทางนักเขียน

อ้างอิง：CSS scroll-snap-align ที่แปลงตำแหน่ง

อ้างอิง：CSS scroll-snap-type ที่แปลงรูปแบบ

อ้างอิง：CSS รูปแบบการเขียน