A propriedade CSS scroll-padding-inline

Definição e Uso

scroll-padding-inline Atributo especifica a distância da posição de adesão do elemento filho ao contêiner na direção inline.

Isso significa que, quando você para 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 inline é a direção na qual o próximo caractere é colocado em relação à posição dos caracteres existentes em uma linha. Isso também é o modo de layout dos elementos com CSS display: inline; (como <a> e <strong> tags) no texto. A direção inline depende do idioma de escrita, por exemplo, o árabe coloca novos caracteres da direita para a esquerda, tornando a direção inline da direita para a esquerda, enquanto a página inglesa tem uma direção inline da esquerda para a direita. A direção inline pode ser configurada através do atributo CSS direction e writing-mode definir.

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

Atenção:Este atributo está disponível apenas na direção inlinescroll-snap-align É válido apenas quando o atributo é configurado como 'start' ou 'end'.

O atributo scroll-padding-inline é uma abreviação dos seguintes atributos:

• scroll-padding-inline-start
• scroll-padding-inline-end

scroll-padding-inline O valor do atributo pode ser configurado de diferentes maneiras:

Se o atributo scroll-padding-inline tiver dois valores:

scroll-padding-inline: 10px 50px;

• A distância inicial é de 10px
• A distância final é de 50px

Se o atributo scroll-padding-inline tiver um valor:

scroll-padding-inline: 10px;

• A distância inicial e final é de 10px

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

Atributo CSS scroll-padding-block e scroll-padding-inline Atributo e Atributo CSS A propriedade CSS scroll-padding-top,scroll-padding-bottom,scroll-padding-left e scroll-padding-right são muito semelhantes, mas scroll-padding-block e scroll-padding-inline A propriedade depende da direção do bloco e da direção inline.

Exemplo

Exemplo 1

Defina o preenchimento interno de rolagem na direção inline, de 20px do contêiner até a posição de adesão:

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

Experimente você mesmo

Exemplo 2: biblioteca de imagens

Em uma galeria de imagens com comportamento de adesão, você pode usar scroll-padding-inline A propriedade empurra a imagem para trás do elemento fixo:

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

Experimente você mesmo

Exemplo 3

Quando o elemento do contêiner writing-mode Quando o valor da propriedade é 'vertical-rl', a posição de início do contêiner e dos elementos filhos na direção inline move-se da esquerda para o topo, e a posição de fim move-se da direita para o fundo. Isso afeta o comportamento de adesão à rolagem e: scroll-padding-inline Como a propriedade funciona:

#container {
  scroll-padding-inline: 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 de início do contêiner e dos elementos filhos na direção inline move-se da direita para a esquerda. Isso afeta o comportamento de adesão à rolagem e: scroll-padding-inline Como a propriedade funciona:

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

Experimente você mesmo

Sintaxe do CSS

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