A propriedade CSS scroll-margin-bottom

Definição e uso

scroll-margin-bottom A propriedade especifica a distância entre a posição de adesão e o recipiente.

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

Posição de adesão através scroll-snap-align A posição de adesão é a posição na qual o elemento filho se adere ao contêiner quando a rolagem para. de direção e writing-mode propriedade

influência.Atenção:

esse atributo é válido apenas quando a posição de adesão está configurada na parte inferior do elemento filho. scroll-margin-bottom A propriedade deve ser configurada no elemento filho para ver scroll-margin-bottom e scroll-snap-align A propriedade e configure o efeito da propriedade scroll-snap-type propriedade.

Exemplo

Exemplo 1

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

div {
  scroll-margin-bottom: 20px;
}

Experimente você mesmo

Exemplo 2: Biblioteca de imagens

scroll-margin-bottom A propriedade pode ser usada em galerias de imagens com comportamento de adesão. Neste exemplo,scroll-margin-bottom Foque o usuário em que há uma imagem na parte inferior. Role para a primeira imagem para ver o efeito:

#container > img {
  scroll-margin-bottom: 30px;
}

Experimente você mesmo

Exemplo 3: Posição de adesão

Para fazer scroll-margin-bottom A propriedade está em vigor, a posição de adesão deve ser configurada na parte inferior do elemento filho. Neste exemplo,writing-mode A propriedade mudará a posição de adesão de baixo do elemento filho para a esquerda. Quando usar esse código,scroll-margin-bottom A propriedade não será mais válida:

#container {
  writing-mode: vertical-rl;
}
#container > div {
  scroll-margin-bottom: 30px;
  scroll-snap-align: end none;
}

Experimente você mesmo

Sintaxe do CSS

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

Valor da propriedade

Valor Descrição
0 A margem inferior de rolagem no fundo é zero. Isso é o valor padrão.
length

Especifique a margem inferior de rolagem em unidades como px, pt, cm, etc. Valores negativos são permitidos.

Veja:Unidades 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: none
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.scrollMarginBottom="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 68.0 14.1 56.0

Páginas relacionadas

Referência:Atributo direction do CSS

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

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

Referência:A propriedade CSS writing-mode