CSS scroll-margin-block-start Eigenschaft

Definition und Verwendung

scroll-margin-block-start Das Attribut bestimmt die Distanz zwischen der吸附位置 im Blockdirection und dem Container.

Das bedeutet, dass der Scrollvorgang schnell angepasst und an der angegebenen Distanz zwischen der吸附位置 im Blockdirection und dem Container angehalten wird, wenn Sie das Scrollen beenden.

Die Blockrichtung bezieht sich auf die Position, in der die nächste Zeile im Vergleich zur aktuellen Zeile platziert wird, das ist auch die Layoutweise der im Browser angezeigten Elemente mit CSS display: block; (z.B. <p> und <div>-Elemente). Die Blockrichtung hängt von der Schreibrichtung der Sprache ab, z.B. bei mongolischen Texten ist die neue Zeile von links nach rechts angeordnet, daher ist die Blockrichtung von links nach rechts, während die Blockrichtung auf englischen Seiten nach unten geht. Die Blockrichtung kann durch das CSS-Attribut writing-mode 定义。

吸附位置是指当你停止滚动时，子元素在容器中吸附到位的位置。

注意：此属性仅在块方向的 scroll-snap-align 属性设置为 'start' 时才起作用。

要看到 scroll-margin-block-start 属性的效果，必须在子元素上设置 scroll-margin-block-start 和 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

在块方向上，将对齐位置与容器之间的滚动外边距设置为 20px：

div {
  scroll-margin-block-start: 20px;
}

亲自试一试

例子 2

当 <div> 元素的 writing-mode 属性值设置为 vertical-rl 时，块方向为从右到左。结果是元素的开始部分从顶部移动到右侧：

div {
  scroll-margin-block-start: 50px;
  writing-mode: vertical-rl;
}

亲自试一试

CSS 语法

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

属性值

技术细节

浏览器支持

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

Verwandte Seiten

Referenz:CSS scroll-snap-align-Eigenschaft

Referenz:CSS scroll-snap-type-Eigenschaft

Referenz:CSS writing-mode Eigenschaft