A propriedade CSS scroll-padding

Definição e uso

scroll-padding Este atributo especifica a distância do contêiner até a posição de adesão do elemento filho.

Isso significa que, quando você para de rolar, a rolagem se ajusta rapidamente e para em uma distância especificada do contêiner até a posição de adesão do elemento de foco.

A posição de adesão é a posição fixa do elemento filho no contêiner quando o rolagem para.

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

scroll-padding Os valores do atributo podem ser configurados de diferentes maneiras:

Se o atributo scroll-padding tiver quatro valores:

scroll-padding: 15px 30px 60px 90px;
  • A distância do topo é de 15px
  • A distância da direita é de 30px
  • A distância do fundo é de 60px
  • A distância da esquerda é de 90px

Se o atributo scroll-padding tiver três valores:

scroll-padding: 15px 30px 60px;
  • A distância do topo é de 15px
  • A distância da esquerda e direita é de 30px
  • A distância do fundo é de 60px

Se o atributo scroll-padding tiver dois valores:

scroll-padding: 15px 30px;
  • A distância do topo e do fundo é de 15px
  • A distância da esquerda e direita é de 30px

Se a propriedade scroll-padding tiver um valor:

scroll-padding: 10px;
  • As distâncias em todas as quatro direções são de 10px

para ver scroll-padding no elemento pai, para ver o efeito scroll-snap-align propriedade, e configure a propriedade scroll-padding e scroll-snap-type propriedade.

Atenção:No exemplo a seguir, a margem interna de rolagem foi configurada para todos os lados, mas devido scroll-snap-align Definido como "start", portanto, apenas a margem interna de rolagem superior muda o comportamento de rolagem.

Exemplo

Exemplo 1

Configure a margem interna de rolagem do contêiner para a posição de adesão em 20px:

div {
  scroll-padding: 20px;
}

Experimente você mesmo

Exemplo 2: Biblioteca de imagens

scroll-padding A propriedade pode ser usada em galerias com comportamento de adesão para empurrar as imagens para baixo do elemento fixo:

#container {
  scroll-padding: 30px 0 0 0;
}
Elemento superior fixo
Pequim Coreografador Wuhan Tulipa Hangzhou

Experimente você mesmo

Exemplo 3: Configuração da margem interna de rolagem na parte inferior e direita

scroll-padding A propriedade pode ser configurada na parte inferior e direita do contêiner ao mesmo tempo. Role horizontal e verticalmente para o próximo elemento para ver o efeito:

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





Experimente você mesmo

Sintaxe do CSS

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

Valor da propriedade

Valor Descrição
auto Valor padrão. O navegador calcula a margem interna.
length

Especifique a margem interna em unidades como px, pt, cm, etc.

Não é permitido usar valores negativos. Veja:Unidades CSS.
% Especifique a margem interna em porcentagem em relação à largura do elemento contido.
initial Defina essa propriedade como 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.scrollPadding="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:A propriedade CSS scroll-padding-bottom

Referência:A propriedade CSS scroll-padding-left

Referência:A propriedade CSS scroll-padding-right

Referência:A propriedade CSS scroll-padding-top

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

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