Atributo scroll-margin-inline-start de CSS

Definición y uso

scroll-margin-inline-start La propiedad especifica la distancia entre la posición de adhesión y el contenedor en la dirección en línea.

Esto significa que, cuando detengas el desplazamiento, se ajustará rápidamente y se detendrá en la distancia especificada en la dirección en línea entre la posición de adhesión del elemento subyacente y el contenedor.

La dirección en línea se refiere a la posición en la que el siguiente carácter se coloca en relación con el carácter actual en una línea, lo que también es el modo de disposición en el texto de etiquetas con CSS display: inline; (como las etiquetas <a> y <strong>). La dirección en línea depende del idioma de escritura, por ejemplo, los caracteres árabes se alinean de derecha a izquierda, por lo que la dirección en línea es de derecha a izquierda, mientras que la dirección en línea en una página inglesa es de izquierda a derecha. La dirección en línea se puede definir mediante la propiedad CSS direction and writing-mode Definition.

The adhesion position refers to the position where the child element吸附 in the container when you stop scrolling.

Note:This attribute is only valid in scroll-snap-align attribute is only effective when the inline direction is set to 'start'.

CSS's scroll-margin-inline and scroll-margin-block attributes are similar to CSS properties 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

Set the distance from the adhesion position to the scrollable container when setting the inline direction:

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

Try It Yourself

Example 2

When the writing-mode When the attribute value is set to vertical-rl, the inline direction is downward. The result is that the starting position of the element moves from the left to the top:

div {
  scroll-margin-inline-start: 20px;
  writing-mode: vertical-rl;
}

Try It Yourself

Example 3

When the direction When the attribute value is set to rtl, the inline direction is from right to left. The result is that the starting position of the element is adjusted from the left (relative to the original direction, which is actually still starting from the right, but here 'left' refers to the left of the original default direction ltr):

div {
  scroll-margin-inline-start: 20px;
  direction: rtl;
}

Try It Yourself

CSS Syntax

inset-inline-start: 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 direction de CSS

Referencia:Atributo scroll-snap-align de CSS

Referencia:Atributo scroll-snap-type de CSS

Referencia:Atributo writing-mode de CSS