A propriedade CSS scroll-padding-block

Definição e uso

scroll-padding-block O atributo especifica a distância da posição de adesão do elemento filho ao recipiente na direção do bloco.

Isso significa que, quando você para de rolar, a rolagem se ajusta rapidamente e para no ponto de adesão e na distância especificada entre o recipiente e o ponto de adesão do elemento filho na direção do bloco.

A direção do bloco é a direção na qual a próxima linha é colocada em relação à posição da linha existente, que também é o modo de layout na página para etiquetas com CSS display: block; (como <p> e <div> tags). A direção do bloco depende da língua de escrita, por exemplo, no mongol, as novas linhas são alinhadas da esquerda para a direita, portanto, a direção do bloco também é da esquerda para a direita, enquanto na página inglesa, a direção do bloco é para baixo. A direção do bloco pode ser configurada através do atributo CSS writing-mode Para definir.

A posição de adesão é a posição na qual o elemento filho se adere ao recipiente quando você para de rolar.

Aviso:Este atributo está disponível apenas na direção do bloco:scroll-snap-align É válido quando a propriedade é configurada como 'start' ou 'end'.

scroll-padding-block A propriedade é uma abreviação das seguintes propriedades:

• scroll-padding-block-start
• scroll-padding-block-end

scroll-padding-block O valor da propriedade pode ser configurado de diferentes maneiras:

Se o atributo scroll-padding-block tiver dois valores:

scroll-padding-block: 10px 50px;

• A distância do início é de 10px
• A distância do fim é de 50px

Se o atributo scroll-padding-block tiver um valor:

scroll-padding-block: 10px;

• A distância do início e do fim é de 10px

Para ver scroll-padding-block O efeito da propriedade deve ser configurado no elemento filho scroll-snap-align attribute, and set scroll-padding-block and scroll-snap-type attribute.

CSS's scroll-padding-block and scroll-padding-inline attributes are similar to the CSS attribute A propriedade CSS scroll-padding-top,scroll-padding-bottom,scroll-padding-left and scroll-padding-right are very similar, but scroll-padding-block and scroll-padding-inline The attribute depends on the block direction and inline direction.

Instance

Example 1

Set the scroll padding in the block direction to 20px from the container to the snap position:

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

Try It Yourself

Example 2: Image Library

scroll-padding-block The attribute can be used for image galleries with snap behavior to push the images below the fixed element:

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

Try It Yourself

Example 3

When the container element's writing-mode When the attribute value is set to vertical-rl, the starting position of the container and its child elements in the block direction moves from the top to the right, and the ending position moves from the bottom to the left. This will affect the scroll snap behavior and scroll-padding-block How the attribute works:

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

Try It Yourself

CSS Syntax

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

Attribute Value

Technical Details

Browser Support

The numbers in the table represent the browser version that first fully supports this property.

Páginas relacionadas

Referência:A propriedade CSS scroll-padding-block-end

Referência:A propriedade CSS scroll-padding-block-start

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

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

Referência:Propriedade writing-mode do CSS