A propriedade CSS scroll-margin-block-end

Definição e uso

scroll-margin-block-end A propriedade especifica a distância entre a posição de alinhamento na direção do bloco e o contêiner.

Isso significa que quando você parar de rolar, a rolagem se ajusta rapidamente e para em uma posição de adesão especificada entre a distância da posição final do elemento na direção do bloco e 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 é a maneira como os elementos com CSS display: block; (como as tags <p> e <div>) são alinhados 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, portanto, 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 especificada através da propriedade 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.

Notas:Essa propriedade só tem efeito na direção do bloco. scroll-snap-align está definida como 'end'.

A propriedade só tem efeito quando a propriedade scroll-margin-block-end propriedade no elemento pai, para ver scroll-margin-block-end e scroll-snap-align propriedade, e configure scroll-snap-type A propriedade

do CSS. scroll-margin-inline e scroll-margin-block A propriedade é equivalente à propriedade A propriedade CSS scroll-margin-top,scroll-margin-bottom,scroll-margin-left e scroll-margin-right É muito semelhante, mas scroll-margin-block e scroll-margin-inline A propriedade depende da direção do bloco e da direção da linha.

Exemplo

Exemplo 1

No bloco de direção, define a posição de alinhamento entre a posição da alinhamento e o contêiner como 20px:

div {
  scroll-margin-block-end: 20px;
}

Experimente você mesmo

Exemplo 2

Quando o elemento <div> writing-mode Quando a propriedade value é definida como vertical-rl, a direção do bloco é de direita para esquerda. O resultado é que a extremidade do elemento se move para a esquerda a partir da parte inferior:

div {
  scroll-margin-block-end: 50px;
  writing-mode: vertical-rl;
}

Experimente você mesmo

Sintaxe do CSS

scroll-margin-block-end: 0|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