A propriedade CSS scroll-padding-block-start

Definição e uso

scroll-padding-block-start A propriedade especifica a distância da direção do bloco, da posição de adesão do elemento filho ao início do contêiner.

Isso significa que, quando você parar de rolar, a rolagem será ajustada rapidamente e parará no ponto de adesão e na distância especificada entre o contêiner.

A direção do bloco se refere à posição em relação à linha existente, na qual a próxima linha é colocada. Isso também é o modo de layout na página dos elementos que têm CSS display: block; (como os tags <p> e <div>). A direção do bloco depende do idioma de escrita, por exemplo, o mongol novo linha é alinhada da esquerda para a direita, portanto, a direção do bloco é da esquerda para a direita, enquanto a direção do bloco na página inglesa é para baixo. A direção do bloco pode ser especificada pela propriedade CSS writing-mode para definir.

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

Nota:Esta propriedade é aplicável apenas na direção do bloco scroll-snap-align definida como 'start' para que funcione.

a propriedade scroll-padding-block-start no elemento pai, e para ver o efeito, é necessário definir scroll-snap-align propriedade, e defina a propriedade scroll-padding-block-start e scroll-snap-type propriedade.

Exemplo

Exemplo 1

Defina a margem interna de rolagem na direção do bloco do início do contêiner até a posição de adesão como 20px:

div {
  scroll-padding-block-start: 20px;
}

Experimente você mesmo

Exemplo 2: biblioteca de imagens

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

#container {
  scroll-padding-block-start: 30px;
}

Experimente você mesmo

Exemplo 3

Quando o elemento do contêiner writing-mode Quando o valor da propriedade é vertical-rl, a posição inicial do contêiner na direção do bloco e dos elementos filhos se move da parte superior para a direita. Isso afeta o comportamento de adesão de rolagem e scroll-padding-block-start Como a propriedade funciona:

#container {
  scroll-padding-block-start: 20px;
  writing-mode: vertical-rl;
}

Experimente você mesmo

Sintaxe do CSS

scroll-padding-block-start: 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:A propriedade CSS scroll-snap-align

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

Referência:A propriedade CSS writing-mode