CSS scroll-margin-block Eigenschaft

Definition und Verwendung

scroll-margin-block Das Attribut gibt die Distanz zwischen der Anziehungskraftposition (snap position) und dem Behälter in der Blockrichtung an.

Das bedeutet, dass sich der Scrollvorgang schnell anpasst und an der angegebenen Distanz zwischen der Anziehungskraftposition in der Blockrichtung und dem Behälter anhält, wenn Sie mit dem Scrollen aufhören.

Die Blockrichtung ist die Richtung, in der das nächste Zeilenobjekt relativ zur aktuellen Zeilenposition positioniert wird, das auch die Layoutmethode der auf CSS display: block; gesetzten Tags (wie <p> und <div>-Tags) auf der Seite ist. Die Blockrichtung hängt von der Schreibrichtung der Sprache ab, z.B. sind die neuen Zeilen in der Mongolischen Sprache von links nach rechts angeordnet, daher ist auch die Blockrichtung von links nach rechts, während die Blockrichtung auf englischen Seiten nach unten zeigt. Die Blockrichtung kann durch das CSS-Attribut writing-mode definiert.

Die Anziehungskraftposition ist der Ort, an dem der Unterelement im Behälter anzieht, wenn Sie mit dem Scrollen aufhören.

Hinweis:Diese Eigenschaft ist nur in der Blockrichtung gültig. scroll-snap-align Gültig, wenn das Attribut auf 'start' oder 'end' gesetzt ist.

scroll-margin-block Das Attribut ist eine Abkürzung für die folgenden Attribute:

scroll-margin-block Der Wert des Attributs kann auf verschiedene Weise festgelegt werden:

Wenn der scroll-margin-block-Attribut zwei Werte hat:

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-Eigenschaft、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-Einheit。
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

Verwandte Seiten

Referenz:CSS scroll-margin-block-end Eigenschaft

Referenz:CSS scroll-margin-block-start Eigenschaft

Referenz:CSS scroll-snap-align-Eigenschaft

Referenz:CSS scroll-snap-type-Eigenschaft

Referenz:CSS writing-mode Eigenschaft