A propriedade CSS scroll-snap-stop

Definição e uso

Quando se desliza rapidamente no touchpad ou na tela tátilscroll-snap-stop A propriedade é usada para especificar se a rolagem pula diretamente para o próximo elemento ou para parar e aderir ao próximo elemento.

Para controlar o comportamento de parada de adesão da rolagem, é necessário definir a propriedade no elemento filho scroll-snap-stop e scroll-snap-align propriedade, enquanto define scroll-snap-type propriedade.

Atenção: você precisa usar gestos de deslizar em um dispositivo com touchpad ou tela tátil para experimentar scroll-snap-stop Efeito da propriedade.

Exemplo

Forçar a rolagem a parar e aderir ao próximo elemento ao deslizar rapidamente no touchpad ou na tela tátil, em vez de pular diretamente para o próximo elemento:

div {
  scroll-snap-stop: always;
}

Experimente você mesmo

Sintaxe do CSS

scroll-snap-stop: normal|always|initial|inherit;

Valor da propriedade

Valor Descrição
normal Valor padrão. Após deslizar rapidamente no touchpad ou na tela tátil, a rolagem desacelerará lentamente e saltará vários elementos.
always Após deslizar rapidamente no touchpad ou na tela tátil, a rolagem parará e o próximo elemento será aderido à posição do foco.
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: normal
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.scrollSnapStop="always"

Suporte do navegador

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

Chrome Edge Firefox Safari Ópera
75.0 79.0 103.0 15.0 62.0

Páginas relacionadas

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

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