A propriedade CSS scroll-margin-inline

Definição e uso

scroll-margin-inline A propriedade especifica a distância entre a posição de adesão e o contêiner na direção inline.

Isso significa que, quando você parar de rolar, a rolagem se ajustará rapidamente e parará na distância especificada na direção inline, que está entre a posição de adesão e o contêiner.

A direção inline é a direção na qual o próximo caractere é colocado em relação ao caractere existente na linha, que é também a maneira de layout dos elementos com CSS display: inline; (como tags <a> e <strong>) no texto. A direção inline depende do idioma de escrita, por exemplo, os novos caracteres do árabe são alinhados da direita para a esquerda, portanto, a direção inline é da direita para a esquerda, enquanto a direção inline da página inglesa é da esquerda para a direita. A direção inline pode ser configurada através da propriedade CSS direction and writing-mode Definição.

A posição de adesão é a posição na qual o elemento filho se adere ao contêiner quando a rolagem parar.

scroll-margin-inline A propriedade é uma abreviação da seguinte propriedade:

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

Se a propriedade scroll-margin-inline tiver dois valores:

scroll-margin-inline: 20px 70px;

• A distância de início é de 20px
• A distância de fim é de 70px

Se a propriedade scroll-margin-inline tiver um valor:

scroll-margin-inline: 20px;

• A distância de início e fim é de 20px

Para ver scroll-margin-inline O efeito da propriedade deve ser configurado no elemento filho scroll-margin-inline and scroll-snap-align properties, and set them on the parent element. scroll-snap-type properties.

of CSS. scroll-margin-inline and scroll-margin-block properties are similar to the CSS properties A propriedade 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 attribute depends on the block direction and the inline direction.

Instance

Example 1

Sets the distance from the adhesive 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

Referência:Atributo direction do CSS

Referência:A propriedade CSS scroll-margin-inline-end

Referência:A propriedade CSS scroll-margin-inline-start

Referência:A propriedade CSS scroll-snap-align

Referência:A propriedade CSS scroll-snap-type

Referência:A propriedade CSS writing-mode