A propriedade CSS scroll-padding-inline-end

Definição e uso

scroll-padding-inline-end Este atributo especifica a distância entre o final do contêiner e a posição de alinhamento do elemento filho na direção da linha.

Isso significa que, quando a rolagem é interrompida, ela se ajusta rapidamente e para na distância especificada entre a posição de alinhamento 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, isso também é o modo de layout dos elementos com CSS display: inline; (como tags <a> e <strong>) no texto. A direção da linha depende do idioma 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 definida através do atributo CSS direction e writing-mode Definição.

A posição de alinhamento é a posição na qual o elemento filho se alinha no contêiner quando a rolagem é interrompida.

Atenção:Este atributo está disponível apenas em scroll-snap-align Este atributo só entra em vigor quando a direção da linha é configurada como 'end'.

para ver scroll-padding-inline-end propriedade no elemento pai, e defina scroll-snap-align propriedade, e defina scroll-padding-inline-end e scroll-snap-type propriedade.

Exemplo

Exemplo 1

Defina o preenchimento interno de direção da linha do contêiner da extremidade até a posição alinhada como 20px:

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

Experimente você mesmo

Exemplo 2: biblioteca de imagens

scroll-padding-inline-end A propriedade pode ser usada em galerias com comportamento de alinhamento para empurrar imagens de um elemento fixo:

#container {
  scroll-padding-inline-end: 30px;
}

Experimente você mesmo

Exemplo 3

Quando o elemento do contêiner writing-mode Quando o valor da propriedade é 'vertical-rl', o início do contêiner e dos elementos filhos no sentido da linha interna move-se da esquerda para o topo, enquanto o final move-se da direita para o fundo. Isso afeta o comportamento de alinhamento da rolagem e scroll-padding-inline-end Como a propriedade funciona:

#container {
  scroll-padding-inline-end: 20px;
  writing-mode: vertical-rl;
}

Experimente você mesmo

Exemplo 4

Quando o elemento do contêiner direction Quando o valor da propriedade é 'rtl', o final do contêiner e dos elementos filhos no sentido da linha interna move-se da direita para a esquerda. Isso afeta o comportamento de alinhamento da rolagem e scroll-padding-inline-end Como a propriedade funciona:

#container {
  scroll-padding-inline-end: 20px;
  direction: rtl;
}

Experimente você mesmo

Sintaxe do CSS

scroll-padding-inline-end: auto|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