Atributo CSS scroll-margin-block-start

Definición y uso

scroll-margin-block-start La propiedad especifica la distancia entre la posición de adhesión en la dirección del bloque y el contenedor.

Esto significa que cuando deje de desplazarse, el desplazamiento se ajustará rápidamente y se detendrá en la posición de adhesión del elemento subyacente en la dirección del bloque y en la distancia especificada con el contenedor.

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

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

Note:This property only takes effect in the block direction scroll-snap-align property set to 'start' only takes effect.

to see scroll-margin-block-start property effects on the parent element, must set scroll-margin-block-start and scroll-snap-align property, and set scroll-snap-type properties.

CSS's scroll-margin-inline and scroll-margin-block properties are similar to CSS properties Atributo CSS scroll-margin-top,scroll-margin-bottom,scroll-margin-left and scroll-margin-right are very similar, but scroll-margin-block and scroll-margin-inline The property depends on the block direction and inline direction.

Instance

Example 1

Sets the alignment position and the container's scroll margin in the block direction to 20px:

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

Try It Yourself

Example 2

When the <div> element's writing-mode When the property value is set to vertical-rl, the block direction is from right to left. The result is that the starting part of the element moves to the right from the top:

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

Try It Yourself

CSS Syntax

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

Property Value

Technical Details

Browser Support

The numbers in the table represent the browser version that first fully supports this property.

Páginas relacionadas

Referencia:Atributo CSS scroll-snap-align

Referencia:Atributo CSS scroll-snap-type

Referencia:Atributo writing-mode de CSS