A propriedade CSS scroll-margin-inline-end

Definição e uso

scroll-margin-inline-end O atributo especifica a distância entre a posição de adesão e o contêiner na direção da linha.

Isso significa que, quando você para de rolar, a rolagem se ajusta rapidamente e para no distância especificada na direção da linha, que é a distância entre a posição de adesão do final do elemento filho e o contêiner.

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

A posição de adesão é o local onde o elemento filho se adere ao contêiner quando você para de rolar.

Atenção:Essa propriedade é definida apenas na direção inline scroll-snap-align o valor da propriedade é 'end'.

propriedade ativa apenas quando scroll-margin-inline-end propriedade no elemento pai, para ver scroll-margin-inline-end e scroll-snap-align propriedade, e defina scroll-snap-type propriedade.

do CSS scroll-margin-inline e scroll-margin-block A propriedade é semelhante à propriedade A propriedade CSS scroll-margin-top,scroll-margin-bottom,scroll-margin-left e scroll-margin-right É muito semelhante, 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 à caixa rolagem interna:

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

Experimente você mesmo

Exemplo 2

Quando a propriedade do elemento <div> writing-mode Quando o valor da propriedade 'vertical-rl' é definido, a direção inline é para baixo. O resultado é que a extremidade do elemento se move da direita para o fundo:

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

Experimente você mesmo

Exemplo 3

Quando a propriedade do elemento <div> direction Quando o valor da propriedade 'rtl' é definido, a direção inline é de direita para esquerda. O resultado é que a extremidade do elemento se move da direita para a esquerda:

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

Experimente você mesmo

Sintaxe do CSS

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

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

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

Referência:A propriedade CSS writing-mode