Mwili wa CSS scroll-margin-block

Definition and usage

scroll-margin-block The property specifies the distance between the snap position (snap position) and the container in the block direction.

This means that when you stop scrolling, the scroll will quickly adjust and stop at the specified distance between the snap position in the block direction and the container.

Block direction refers to the direction in which the next line is placed relative to the existing line position, which is also the layout method of the tags with CSS display: block; on the page, such as <p> and <div> tags. The block direction depends on the writing language, for example, the new line of Mongolian is arranged from left to right, so the block direction is also from left to right, while the block direction of English pages is downward. The block direction can be set through the CSS property writing-mode to define.

The snap position refers to the position where the child element吸附到位in the container when you stop scrolling.

Note:This property is only valid in the block direction scroll-snap-align The property is valid when set to 'start' or 'end'.

scroll-margin-block The property is a shorthand for the following properties:

scroll-margin-block The value of the property can be set in different ways:

If the scroll-margin-block property has two values:

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 属性 Mfano wa 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;
}

Jifunze kwa mwenyewe

例子 2

当子元素的 writing-mode 属性值设置为 vertical-rl 时，元素在块方向的起始位置从顶部移动到右侧，结束位置从底部移动到左侧。这会影响滚动吸附行为以及 scroll-margin-block Jeografia ya matumizi ya chaguo cha kina:

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

Jifunze kwa mwenyewe

Inayotumiwa na Kiingereza:

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

Thamani ya chaguo cha kina

Thamani Maelezo
0 Chaguo cha kuzingatia cha kwa kina cha kwanza ya scroll-margin-block.
mwelekeo

Inasababisha kuzingatia kwa px, pt, cm na kwa uangalifu. Inaweza kuwa na thamani ya kina.

Tazama:Mafunzo ya hatua ya CSS.
initial Kumwambia hii chaguo cha kuzingatia kwa chaguo cha kuzingatia chake. Tazama: initial.
inherit Kumwambia hii chaguo cha kuzingatia kutoka kwa elementi yake ya kina. Tazama: inherit.

Maelezo ya tekniolojia

Chaguo cha kuzingatia: 0
Umatumizi wa kumuathirika: Haiwahatika
Umatumizi wa hali ya hali: Hinasimamishwa. Tazama:Mafanikio ya hali ya hali.
Toleo: CSS3
Inayotumiwa na Kiingereza: object.style.scrollMarginBlock="20px"

Matumizi ya kifaa cha kina

Jina za kifaa cha kwanza zinaonyesha kwa sababu ya hifadhi hizi.

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

Mawaka ya kuelewa

Tunaneza:Mwili wa CSS scroll-margin-block-end

Tunaneza:Mwili wa CSS scroll-margin-block-start

Tunaneza:Mfano wa CSS scroll-snap-align

Tunaneza:Mfano wa CSS scroll-snap-type

Tunaneza:Mafuta wa writing-mode wa CSS