A propriedade CSS scroll-snap-align

Definição e uso

scroll-snap-align A propriedade especifica o local ao qual o elemento se aderirá quando a rolagem for interrompida.

Para implementar o comportamento de adesão de rolagem, é necessário configurar a propriedade no elemento filho scroll-snap-align propriedade e configure na elemento pai scroll-snap-type Propriedade。

Exemplo

Exemplo 1

Quando o usuário parar de rolar，faça com que o elemento mais recente seja aderido ao centro:

div {
  scroll-snap-align: center;
}

Experimente você mesmo

Exemplo 2: Biblioteca de imagens

scroll-snap-align A propriedade é muito adequada para usar em bibliotecas de imagens de rolagem. Aqui，a direção de rolagem é horizontal，e o modo de alinhamento de adesão é central. Quando o usuário soltar a barra de rolagem，a imagem mais próxima será aderida ao centro da área rolável. Tente clicar em uma imagem，e use as teclas de seta esquerda e direita para navegar por elas:

#container > img {
  scroll-snap-align: none center;
}
Pequim Dançarino Wuhan Tulipa Hangzhou

Experimente você mesmo

bridge alley in jungle mountains man with camera Cinque Terre

Exemplo 3: Alinhamento de adesão vertical na direção do bloco

Quando houver rolagem vertical，scroll-snap-align A propriedade também pode ser configurada como a posição inicial do elemento na direção do bloco：

#container > div {
  scroll-snap-align: start none;
}

Experimente você mesmo

Sintaxe do CSS

scroll-snap-align: none|start|end|center|block inline|initial|inherit;

Valor da propriedade

Valor Descrição
none Sem efeito de adesão de rolagem. Valor padrão.
start No eixo x e y, a adesão de rolagem ocorre no início do elemento.
end No eixo x e y, a adesão de rolagem ocorre no final do elemento.
center No eixo x e y, a adesão de rolagem ocorre no centro do elemento.
block inline Sintaxe de dois valores. O primeiro valor especifica o modo de adesão na direção do bloco, e o segundo valor especifica o modo de adesão na direção da linha.
initial Defina essa propriedade como seu valor padrão. Veja também initial。
inherit Herda essa propriedade do elemento pai. Veja também inherit。

Detalhes técnicos

Valor padrão： none
Herança： Não
Produção de animação： Não suportado. Veja também：Propriedades relacionadas a animação。
Versão： CSS3
Sintaxe do JavaScript： object.style.scrollSnapAlign="start"

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 11.0 56.0

Páginas relacionadas

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