Atributo scroll-margin do CSS

Definição e uso

scroll-margin O atributo especifica a distância entre a posição de adesão e o contêiner.

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

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

scroll-margin O atributo é uma abreviação dos seguintes atributos:

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

Se o atributo scroll-margin tiver quatro valores:

scroll-margin: 15px 30px 60px 90px;
  • A distância do topo é de 15px
  • A distância da direita é de 30px
  • A distância do fundo é de 60px
  • A distância da esquerda é de 90px

Se o atributo scroll-margin tiver três valores:

scroll-margin: 15px 30px 60px;
  • A distância do topo é de 15px
  • distância nos lados esquerdo e direito é de 30px
  • A distância do fundo é de 60px

Se o atributo scroll-margin tiver dois valores:

scroll-margin: 15px 30px;
  • distância no topo e na parte inferior é de 15px
  • distância nos lados esquerdo e direito é de 30px

Se a propriedade scroll-margin tiver um valor:

scroll-margin: 10px;
  • distância em todas as quatro direções é de 10px

para ver scroll-margin o efeito das propriedades, deve ser configurado no elemento filho scroll-margin e scroll-snap-align Propriedade, e configure scroll-snap-type Propriedade.

Atenção:Nos exemplos abaixo, margens de rolagem foram configuradas em todos os lados, mas devido a scroll-snap-align A propriedade está configurada como "start", portanto, apenas a margem de rolagem superior muda o comportamento de rolagem.

Exemplo

Exemplo 1

Configure a margem de rolagem entre a posição de adesão e o contêiner em 20px:

div {
  scroll-margin: 20px;
}

Experimente você mesmo

Exemplo 2: Biblioteca de imagens

scroll-margin A propriedade pode ser usada em bibliotecas de imagens com comportamento de adesão. Aqui,scroll-margin Permite que o usuário veja que há outra imagem à esquerda. Para ver o efeito, role passando a primeira imagem:

#container > img {
  scroll-margin: 0 0 0 30px;
}
Pequim Bailarina Wuhan Tulipa Hangzhou

Experimente você mesmo

Exemplo 3: Configurar margem de rolagem inferior e direita

Pode ser configurado na parte inferior e direita do elemento. scroll-margin Propriedade. Para ver o efeito, role horizontal e verticalmente até o próximo elemento:

#container > div {
  scroll-margin: 0 10px 30px 0;
}





Experimente você mesmo

Sintaxe do CSS

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

Valor da propriedade

Valor Descrição
0 Margem de rolagem zero. Valor padrão.
length

Especifique a margem de rolagem em unidade de px, pt, cm, etc. É permitido usar valores negativos.

Veja:Unidades do CSS.
initial Defina essa propriedade como seu valor padrão. Veja initial.
inherit Herda essa propriedade do elemento pai. Veja inherit.

Detalhes técnicos

Valor padrão: 0
Herança: Não
Produção de animação: Não suportado. Veja:Propriedades relacionadas a animação.
Versão: CSS3
Sintaxe do JavaScript: object.style.scrollMargin="20px"

Suporte do navegador

Os números na tabela representam a versão do navegador que suporta completamente essa propriedade.

Chrome Edge Firefox Safari Opera
69.0 79.0 90.0 14.1 56.0

Páginas relacionadas

Referência:A propriedade CSS scroll-margin-bottom

Referência:A propriedade CSS scroll-margin-left

Referência:A propriedade CSS scroll-margin-right

Referência:A propriedade CSS scroll-margin-top

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

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