A propriedade CSS scroll-padding-block-end

Definição e uso

scroll-padding-block-end A propriedade especifica a distância da extremidade do contêiner para a posição de adesão do elemento na direção do bloco.

Isso significa que, quando você parar de rolar, a rolagem se ajustará 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 no navegador para etiquetas que têm CSS display: block; (como as etiquetas <p> e <div>). A direção do bloco depende do idioma de escrita, por exemplo, o mongol tem novas linhas alinhadas da esquerda para a direita, portanto, a direção do bloco é da esquerda para a direita, enquanto a direção do bloco em páginas em inglês é 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:Este atributo está disponível apenas na direção do bloco scroll-snap-align esse atributo.

a propriedade é definida como 'end'. scroll-padding-block-end no elemento pai, e para ver o efeito, deve ser definido scroll-snap-align propriedade, e defina a propriedade scroll-padding-block-end e scroll-snap-type propriedade.

Exemplo

Exemplo 1

Defina a margem interna de rolagem na direção do bloco do final do contêiner até a posição de adesão em 20px:

div {
  scroll-padding-block-end: 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-end A propriedade empurra a imagem para acima do elemento fixo:

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

Experimente você mesmo

Exemplo 3

Quando o elemento do contêiner writing-mode Quando a propriedade é definida como vertical-rl, o final do contêiner na direção do bloco e os elementos filhos se movem do fundo para a esquerda. Isso afeta o comportamento de adesão de rolagem e scroll-padding-block-end Como a propriedade funciona:

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

Experimente você mesmo

Sintaxe do CSS

scroll-padding-block-end: 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:Propriedade writing-mode do CSS