A propriedade scroll-padding-left do CSS

Definição e uso

scroll-padding-left o atributo especifica a distância do lado esquerdo do contêiner até a posição de adsorção do elemento.

a posição de adsorção é o local onde o elemento filho se adere ao contêiner ao parar de rolar.

a posição de adsorção é determinada por scroll-snap-align definição de atributo, mas também pode ser afetado pelo atributo CSS direction e writing-mode influência.

Atenção:Este atributo é válido apenas quando a posição de adsorção está definida no lado esquerdo do elemento filho.

deve ser configurado no elemento filho scroll-padding-left no elemento pai, e para ver o efeito da propriedade scroll-snap-align Propriedade, e configure a propriedade scroll-padding-left e scroll-snap-type Propriedade.

Exemplo

Exemplo 1

Defina a margem interna de rolagem para uma distância de 20px da esquerda do contêiner até a posição de adesão:

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

Experimente você mesmo

Exemplo 2: Biblioteca de imagens

scroll-padding-left A propriedade pode ser usada em galerias de imagens com comportamento de adesão para empurrar as imagens para dentro da visão a partir do elemento fixo:

#container > img {
  scroll-padding-left: 30px;
}

Experimente você mesmo

Exemplo 3: Definir margem interna na esquerda

Quando o comportamento de adesão é configurado em ambas as direções, também pode ser configurado no contêiner: scroll-padding-left Propriedade. Role horizontalmente para o próximo elemento para ver o efeito:

#container > div {
  scroll-padding-left: 30px;
}

Experimente você mesmo

Exemplo 4: Posição de adesão

Para fazer scroll-padding-left A propriedade deve estar ativa, e a posição de adesão deve ser configurada no lado esquerdo do elemento filho. Neste exemplo,direction O valor da propriedade 'rtl' mudará a posição de adesão do lado esquerdo do elemento filho para o lado direito. Quando usar esse código,scroll-padding-left A propriedade não terá mais efeito:

#container {
  direction: rtl;
  scroll-padding-left: 30px;
}
#container > div {
  scroll-snap-align: none start;
}

Experimente você mesmo

Sintaxe do CSS

scroll-padding-left: 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 scroll-snap-align do CSS

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

Referência:Propriedade writing-mode do CSS