Atributo scroll-margin-inline de CSS

Definición y uso

scroll-margin-inline El atributo 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, el desplazamiento se ajustará rápidamente y se detendrá en la distancia especificada en la dirección en línea, que se encuentra entre la posición de adhesión y el contenedor.

La dirección en línea es la dirección en la que el siguiente carácter se coloca en la línea en relación con el carácter existente, lo que también es el modo de disposición en el texto de los elementos con CSS display: inline; (como los elementos <a> y <strong>). La dirección en línea depende del idioma de escritura, por ejemplo, los caracteres árabes se colocan 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 las páginas en inglés es de izquierda a derecha. La dirección en línea se puede configurar a través del atributo CSS direction and writing-mode Definición.

La posición de adhesión es la posición a la que el elemento secundario se adhiere al contenedor cuando se detiene el desplazamiento.

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

• scroll-margin-inline-start
• scroll-margin-inline-end

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

scroll-margin-inline: 20px 70px;

• La distancia desde el principio es de 20px
• La distancia desde el final es de 70px

Si el atributo scroll-margin-inline tiene un valor:

scroll-margin-inline: 20px;

• La distancia desde el principio y el final es de 20px

Para ver scroll-margin-inline El efecto de las propiedades debe establecerse en los elementos secundarios scroll-margin-inline and scroll-snap-align property, and set it on the parent element scroll-snap-type property.

CSS's scroll-margin-inline and scroll-margin-block the property is similar to the CSS property 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 distance from the吸附 position to the scrollable container in the inline direction:

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

Try it yourself

Example 2

When the <div> element's writing-mode When the scroll-margin-inline property 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, and the ending position of the element moves from the right to the bottom. This also affects scroll-margin-inline Property:

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

Try it yourself

Example 3

When the <div> element's direction When the scroll-margin-inline property is set to rtl, the inline direction is from right to left. The result is that the starting position of the element moves from the left to the right, and the ending position of the element moves from the right to the left. This also affects scroll-margin-inline Property:

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

Try it yourself

CSS Syntax

scroll-margin-inline: 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-margin-inline-end de CSS

Referencia:Atributo scroll-margin-inline-start de CSS

Referencia:Atributo scroll-snap-align de CSS

Referencia:Atributo scroll-snap-type de CSS

Referencia:Atributo writing-mode de CSS