A propriedade CSS scroll-snap-type

Definição e uso

scroll-snap-type A propriedade especifica como o elemento se fixará ao foco quando você parar de rolar e a direção de fixação.

Para implementar comportamento de adesão de rolagem, é necessário configurar em elemento pai. scroll-snap-type Propriedade e configure em elementos filhos scroll-snap-align Propriedade.

Exemplo

Exemplo 1

Defina função de adesão de rolagem no eixo x:

#container {
  scroll-snap-type: x mandatory;
}

Experimente você mesmo

Exemplo 2: Defina comportamento de adesão em ambos os eixos x e y

Defina ambos os eixos x e y. scroll-snap-type Propriedade:

#container > div {
  scroll-snap-type: both mandatory;
}





Experimente você mesmo

Exemplo 3: Comportamento de adesão com proximidade

Defina efeitos de adesão de rolagem com comportamento de proximidade em ambos os eixos x e y. scroll-snap-type Propriedade. Quando a operação de rolagem parar exatamente no meio de dois elementos, não haverá adesão:

#container > div {
  scroll-snap-type: both proximity;
}





Experimente você mesmo

Sintaxe do CSS

scroll-snap-type: none|x|y|block|inline|both|mandatory|proximity|initial|inherit;

Valor da propriedade

Valor Descrição
none Sem efeito de adesão de rolagem. Valor padrão.
x Defina efeitos de adesão de rolagem no eixo x.
y Defina efeitos de adesão de rolagem no eixo y.
block Defina efeitos de adesão de rolagem na direção block.
inline Defina efeitos de adesão de rolagem na direção inline.
both Defina efeitos de adesão de rolagem em ambos os eixos x e y.
mandatory Após a conclusão da operação de rolagem, a rolagem será movida automaticamente para o ponto de adesão.
proximity

Semelhante a mandatory, mas não tão rigorosa.

Após a conclusão da operação de rolagem, a rolagem será movida automaticamente para o ponto de adesão, mas há uma área entre os pontos de adesão que não tem efeito de adesão.

Depende dos parâmetros do navegador.
initial Configure essa propriedade para 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.scrollSnapType="x mandatory"

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

Páginas relacionadas

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