A propriedade CSS scroll-margin-block-start

Definição e uso

scroll-margin-block-start A propriedade especifica a distância entre a posição de adesão 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 subelemento na direção do bloco e o contêiner.

A direção do bloco é a posição da próxima linha em relação à linha atual, que é 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 tem novas linhas alinhadas da esquerda para a direita, então a direção do bloco é da esquerda para a direita, enquanto a direção do bloco em páginas inglesas é para baixo. A direção do bloco pode ser especificada pela propriedade CSS writing-mode 定义。

Definição.

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: scroll-snap-align essa propriedade.

a propriedade entra em vigor apenas quando o valor da propriedade é 'start'. scroll-margin-block-start a propriedade no elemento filho, para ver scroll-margin-block-start e scroll-snap-align propriedade, e configure scroll-snap-type A propriedade

da CSS. scroll-margin-inline e scroll-margin-block a propriedade é semelhante à propriedade A propriedade scroll-margin-top do CSS,scroll-margin-bottom,scroll-margin-left e scroll-margin-right são muito semelhantes, 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 com a margem externa da caixa para 20px:

div {
  scroll-margin-block-start: 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 parte inicial do elemento se move para a direita:

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

Experimente você mesmo

Sintaxe do CSS

scroll-margin-block-start: 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 scroll-snap-align do CSS

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

Referência:Propriedade writing-mode do CSS