Sifat scroll-margin-block CSS

Definisi dan penggunaan

scroll-margin-block Atribut menentukan jarak di antara tempat penarik (snap position) dan kontainer dalam arah blok.

Ini bermakna ketika Anda berhenti menggulir, penarikan akan menyesuaikan dan berhenti di tempat penarik arah blok dengan jarak yang ditentukan di antara kontainer.

Arah blok adalah arah penempatan baris berikutnya berbanding dengan posisi baris sedia ada, ini juga cara penempatan tag yang mempunyai CSS display: block; seperti tag <p> dan <div> di halaman. Arah blok tergantung kepada bahasa tulisan, contohnya, baris baru dalam bahasa Mongolia diatur dari kiri ke kanan, jadi arah blok juga dari kiri ke kanan, sementara arah blok halaman Inggeris adalah ke bawah. Arah blok dapat diatur melalui atribut CSS writing-mode didefinisikan.

Lokasi penarik adalah lokasi di mana elemen anak diikat ke tempat di dalam kontainer apabila Anda berhenti menggulir.

Perhatian:Atribut ini hanya berlaku dalam arah blok: scroll-snap-align Atribut ini berlaku apabila diatur kepada 'start' atau 'end'.

• scroll-margin-block-start
• scroll-margin-block-end

scroll-margin-block Nilai atribut dapat diatur dengan cara berbeza:

Jika atribut scroll-margin-block mempunyai dua nilai:

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 属性 Sifat 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;

属性值

技术细节

浏览器支持

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

Halaman berkaitan

Rujukan：Sifat scroll-margin-block-end CSS

Rujukan：Sifat scroll-margin-block-start CSS

Rujukan：Sifat scroll-snap-align CSS

Rujukan：Sifat scroll-snap-type CSS

Rujukan：属性 writing-mode CSS