A propriedade CSS scroll-padding-bottom

定义和用法

scroll-padding-bottom 属性指定从容器底部到子元素吸附位置的距离。

吸附位置是指当你停止滚动时，子元素在容器中吸附到位的位置。吸附位置通过 scroll-snap-align 属性设置，但也可能受到 CSS 属性 direction e writing-mode 的影响。

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

seja visto scroll-padding-bottom no elemento pai, para que o efeito da propriedade scroll-snap-align A propriedade, e configure a propriedade scroll-padding-bottom e scroll-snap-type A propriedade.

Exemplo

Exemplo 1

Configure o preenchimento de rolagem da parte inferior do contêiner até a posição de adesão para 20px:

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

Experimente você mesmo

Exemplo 2: Biblioteca de imagens

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

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

Experimente você mesmo

Exemplo 3: Configuração de preenchimento de rolagem inferior

Quando o comportamento de adesão é configurado em duas direções, também pode ser configurado no contêiner scroll-padding-bottom A propriedade. Rolo vertical até o próximo elemento para ver o efeito:

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

Experimente você mesmo

Exemplo 4: Posição de adesão

Para fazer com que scroll-padding-bottom A propriedade deve estar ativa, e a posição de adesão deve ser configurada na parte inferior do elemento filho. Neste exemplo,writing-mode A propriedade mudará a posição de adesão do elemento filho de baixo para a esquerda. Quando usar esse código,scroll-padding-bottom A propriedade não terá mais efeito:

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

Experimente você mesmo

Sintaxe do CSS

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

Valor da propriedade

Valor Descrição
auto Valor padrão. O navegador calcula o preenchimento.
length

Especifique scroll-padding-bottom com unidades como px, pt, cm.

Não é permitido usar valores negativos. Veja:Unidades CSS.
% Especifique a porcentagem da largura do elemento contido como margem interna.
initial Defina essa propriedade para seu valor padrão. Veja: initial.
inherit Herda essa propriedade do elemento pai. Veja: inherit.

Detalhes técnicos

Valor padrão: auto
Herança: Não
Produção de animação: Não suportado. Veja:Propriedades relacionadas a animação.
Versão: CSS3
Sintaxe do JavaScript: object.style.scrollPaddingBottom="20px"

Suporte do navegador

Os números na tabela representam a versão do navegador que suporta completamente essa propriedade.

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

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:Propriedade writing-mode do CSS