A propriedade CSS scroll-margin-block

Definição e uso

scroll-margin-block O atributo especifica a distância entre a posição de adesão (posição de snap) e o contêiner na direção do bloco.

Isso significa que quando você para de rolar, a rolagem se ajusta rapidamente e para em uma distância especificada entre a posição de adesão no bloco e o contêiner.

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 a maneira como os elementos com CSS display: block; (como os elementos <p> e <div>) são layoutados na página. A direção do bloco depende do idioma de escrita, por exemplo, o mongol novo linha é alinhada da esquerda para a direita, então a direção do bloco também é da esquerda para a direita, enquanto a direção do bloco na página inglesa é para baixo. A direção do bloco pode ser configurada pelo atributo CSS writing-mode definir.

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

Atenção:Este atributo é válido apenas na direção do bloco scroll-snap-align O atributo é válido quando configurado como 'start' ou 'end'.

• scroll-margin-block-start
• scroll-margin-block-end

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

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

scroll-margin-block: 10px 50px;

• scroll-margin-block: 10px 50px;
• The distance at the beginning is 10px

The distance at the end is 50px

scroll-margin-block: 10px;

• If the scroll-margin-block attribute has a value:

The distance at the beginning and end is both 10px scroll-margin-block attribute effect on the parent element, and must be set on the child element to see scroll-margin-block and scroll-snap-align attribute, and set the scroll-snap-type attribute.

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

Example

Example 1

Set the distance between the吸附 position in the block direction and the scrollable container:

div {
  scroll-margin-block: 10px;
}

Try It Yourself

Example 2

When the child element's writing-mode When the attribute value is set to vertical-rl, the starting position of the element 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-margin-block How the attribute works:

div {
  scroll-margin-block: 20px 0;
  writing-mode: vertical-rl;
}

Try It Yourself

CSS Syntax

scroll-margin-block: 0|value|initial|inherit;

Attribute Value

Technical Details

Browser Support

The numbers in the table represent the first browser version to fully support this property.

Páginas relacionadas

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

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

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

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

Referência:A propriedade writing-mode do CSS