A propriedade scroll-padding-inline-start do CSS

Definição e uso

scroll-padding-inline-start propriedade especifica a distância do início do contêiner até a posição de adesão do elemento filho na direção da linha.

Isso significa que, quando você parar de rolar, a rolagem se ajustará rapidamente e parará na distância especificada entre a posição de adesão 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, também é o modo de layout dos elementos com CSS display: inline; (como <a> e <strong> tags) 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, então a direção da linha é da direita para a esquerda, enquanto a direção da linha da página inglesa é da esquerda para a direita. A direção da linha pode ser definida pela propriedade CSS direction e writing-mode definição.

A posição de adesão é o local onde o elemento filho se fixa no contêiner ao parar de rolar.

Atenção:esta propriedade define apenas na direção da linha scroll-snap-align quando a propriedade for 'start', ela entra em ação.

ver scroll-padding-inline-start propriedade para ver o efeito, deve ser configurado no elemento filho scroll-snap-align propriedade e configurar na elemento pai scroll-padding-inline-start e scroll-snap-type propriedade.

Exemplo

Exemplo 1

Configure o preenchimento interno de rolagem do contêiner para a posição de adesão na direção inline em 20px:

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

Experimente você mesmo

Exemplo 2: biblioteca de imagens

scroll-padding-inline-start A propriedade pode ser usada em galerias com comportamento de adesão para empurrar imagens de trás de elementos fixos:

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

Experimente você mesmo

Exemplo 3

Quando o elemento do contêiner writing-mode Quando o valor da propriedade é 'vertical-rl', a posição inicial do contêiner e dos elementos filhos na direção inline move-se da parte superior para a direita. Isso afeta o comportamento de adesão da rolagem e scroll-padding-inline-start Como a propriedade funciona:

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

Experimente você mesmo

Exemplo 4

Quando o elemento do contêiner direction Quando o valor da propriedade é 'rtl', a posição inicial do contêiner e dos elementos filhos na direção inline move-se da direita para a esquerda, e a posição final do contêiner e dos elementos filhos move-se da direita para o fundo. Isso afeta o comportamento de adesão da rolagem e scroll-padding-inline Como a propriedade funciona:

#container {
  scroll-padding-inline-start: 20px;
  diretion: rtl;
}

Experimente você mesmo

Sintaxe do CSS

scroll-padding-inline-start: 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 plenamente essa propriedade.

Páginas relacionadas

Referência:Atributo direction do CSS

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

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

Referência:A propriedade CSS writing-mode