A propriedade scroll-padding-top do CSS

Definição e uso

scroll-padding-top A propriedade especifica a distância da parte superior do contêiner até a posição de adesão do elemento filho.

A posição de adesão é a posição onde o elemento filho se adere ao contêiner ao parar a rolagem.

A posição de adesão é determinada por}} scroll-snap-align também pode ser afetada pela propriedade CSS Propriedade de configuração e writing-mode do efeito.

Atenção:Essa propriedade é válida apenas quando a posição de adesão estiver configurada na parte superior do elemento filho.

Para ver scroll-padding-top deve ser configurado no elemento filho scroll-snap-align Propriedade, e a efeito da propriedade scroll-padding-top e scroll-snap-type Propriedade.

Exemplo

Exemplo 1

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

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

Experimente você mesmo

Exemplo 2: Biblioteca de imagens

scroll-padding-top A propriedade pode ser usada em galerias com ações de adesão para empurrar imagens para baixo de elementos fixos:

#container {
  scroll-padding-top: 30px;
}

Experimente você mesmo

Exemplo 3: Definir margem interna de rolagem no topo

Quando são definidas ações de adesão em ambas as direções, também pode ser configurada no contêiner scroll-padding-top A propriedade. Role verticalmente para o próximo elemento para ver o efeito:

#container {
  scroll-padding-top: 30px;
}

Experimente você mesmo

Exemplo 4: Posição de adesão

Para fazer scroll-padding-top A propriedade deve estar ativa, e a posição de adesão deve ser configurada na parte superior do elemento filho. Neste exemplo,writing-mode Quando usar esse código, a propriedadescroll-padding-top A propriedade não terá mais efeito:

#container {
  writing-mode: vertical-rl;
  scroll-padding-top: 30px;
}
#container > div {
  scroll-snap-align: start none;
}

Experimente você mesmo

Sintaxe CSS

scroll-padding-top: auto|value|initial|inherit;

Valor da propriedade

Detalhes técnicos

Suporte do navegador

As tabelas contêm 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:A propriedade CSS writing-mode