Atributo CSS scroll-margin-block-end

Definición y uso

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

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

La dirección del bloque se refiere a la posición relativa con respecto a la línea actual, la dirección en la que se coloca la siguiente línea. Esto también es la forma en que los elementos con CSS display: block; (como las etiquetas <p> y <div>) se disponen en la página. La dirección del bloque depende del idioma de escritura, por ejemplo, el mongol se alinea de izquierda a derecha en las nuevas líneas, 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 especificar mediante la propiedad CSS writing-mode The吸附位置 refers to the position where the child element is吸附到位 in the container when you stop scrolling.

to define.

The吸附位置 refers to the position where the child element is吸附到位 in the container when you stop scrolling.Note: scroll-snap-align This attribute only takes effect in the block direction

the attribute set to 'end' takes effect. scroll-margin-block-end attribute effects on the parent element, and must be set on the child element to see scroll-margin-block-end and scroll-snap-align attribute, and set scroll-snap-type attributes.

CSS's scroll-margin-inline and scroll-margin-block attributes are similar to the CSS attributes Atributo scroll-margin-top de CSS,scroll-margin-bottom,scroll-margin-left and scroll-margin-right are very similar, but scroll-margin-block and scroll-margin-inline The attribute 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-end: 20px;
}

Try it yourself

Example 2

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

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

Try it yourself

CSS Syntax

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

Attribute 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 scroll-snap-align de CSS

Referencia:Atributo scroll-snap-type de CSS

Referencia:Atributo writing-mode de CSS