Atributo CSS scroll-margin-block

Definición y uso

scroll-margin-block El atributo especifica la distancia entre la posición de adhesión (posición de snap) y el contenedor en la dirección del bloque.

Esto significa que cuando detenga la navegación, la navegación se ajustará rápidamente y se detendrá en la distancia especificada entre la posición de adhesión en la dirección del bloque y el contenedor.

La dirección del bloque se refiere a la dirección en la que se coloca la siguiente línea en relación con la posición de la línea actual, que también es la forma en que los elementos con CSS display: block; (como los elementos <p> y <div>) se organizan en la página. La dirección del bloque depende del idioma de escritura, por ejemplo, el mongol se alinea de izquierda a derecha, por lo que la dirección del bloque también es de izquierda a derecha, mientras que la dirección del bloque en las páginas en inglés es hacia abajo. La dirección del bloque se puede definir mediante el atributo CSS writing-mode para definir.

La posición de adhesión se refiere a la posición en la que el elemento secundario se adhiere al contenedor cuando se detiene la navegación.

Nota:Esta propiedad solo se aplica en la dirección del bloque: scroll-snap-align El atributo es válido cuando se establece en 'start' o 'end'.

scroll-margin-block El atributo es una abreviatura de los siguientes atributos:

scroll-margin-block El valor del atributo se puede configurar de diferentes maneras:

Si el atributo scroll-margin-block tiene dos valores:

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 属性 Atributo 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 等为单位的距离。允许负值。

请参阅：Unidades 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

Páginas relacionadas

Referencia:Atributo CSS scroll-margin-block-end

Referencia:Atributo CSS scroll-margin-block-start

Referencia:Atributo CSS scroll-snap-align

Referencia:Atributo CSS scroll-snap-type

Referencia:Atributo writing-mode CSS