A propriedade CSS scroll-margin-inline-start

Definição e uso

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

Isso significa que, quando você parar de rolar, a rolagem se ajustará rapidamente e parará no ponto de adesão entre o início do elemento filho e o contêiner, na direção interna especificada.

A direção interna é a posição da próxima caractere em relação ao caractere atual na linha, isso também é o estilo de layout dos elementos com CSS display: inline; (como os elementos <a> e <strong>) no texto. A direção interna depende do idioma de escrita, por exemplo, o caractere árabe é alinhado da direita para a esquerda, então a direção interna é da direita para a esquerda, enquanto a direção interna da página inglesa é da esquerda para a direita. A direção interna pode ser ajustada através da propriedade CSS direction e writing-mode definição.

A posição de adesão é a posição na qual os elementos filhos se fixam no contêiner quando você para de rolar.

Nota:Essa propriedade só funciona em scroll-snap-align só funcionam quando a direção inline é definida como 'start'.

da CSS scroll-margin-inline e scroll-margin-block propriedades são equivalentes às propriedades CSS A propriedade CSS scroll-margin-top,scroll-margin-bottom,scroll-margin-left e scroll-margin-right São muito semelhantes, mas scroll-margin-block e scroll-margin-inline A propriedade depende da direção do bloco e da direção inline.

Exemplo

Exemplo 1

Defina a distância da posição de adesão ao contêiner rolável na direção inline:

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

Experimente você mesmo

Exemplo 2

Quando o valor da propriedade <div> writing-mode Quando o valor da propriedade é definido como vertical-rl, a direção inline é para baixo. O resultado é que a posição inicial do elemento se move do lado esquerdo para o topo:

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

Experimente você mesmo

Exemplo 3

Quando o valor da propriedade <div> direction Quando o valor da propriedade é definido como rtl, a direção inline é de direita para esquerda. O resultado é que a posição inicial do elemento é ajustada da esquerda (em relação à direção original, na verdade ainda começa na direita, mas aqui 'esquerda' se refere à esquerda da direção padrão (ltr)):

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

Experimente você mesmo

Sintaxe do CSS

inset-inline-start: 0|value|initial|inherit;

Valor da propriedade

Detalhes técnicos

Suporte do navegador

Os números na tabela representam a versão do navegador que suporta completamente essa propriedade.

Páginas relacionadas

Referência:Atributo CSS direction

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

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

Referência:Propriedade writing-mode do CSS