Propriedade Scroll Snap Type
Última atualização: 2026-09-13
scroll-snap-type Propriedade Scroll Snap Type
A propriedade scroll-snap-type ativa um efeito de snap durante a rolagem, fazendo com que o contêiner de rolagem alinhe os elementos especificados à sua borda ou ao centro quando parar. É comumente usada em carrosséis, páginas com rolagem em tela cheia e listas horizontais de deslizar, tornando a experiência de rolagem mais precisa e controlada.
| Categoria | |
|---|---|
| Valor Inicial | none |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
scroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proximity ];⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
none | x | y | block | inline | both | mandatory | proximity | Palavra-chave | O tipo de scroll snap |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| scroll-snap-type | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Suportado em todos os principais navegadores | |||||
Dica： mandatory sempre se ajusta ao ponto de snap mais próximo; proximity só faz o snap quando a posição de parada está perto de um ponto de snap — um comportamento mais tolerante.
Dica： Deve ser combinada com scroll-snap-align nos elementos filhos para definir a posição de alinhamento de cada um.
❓ Perguntas Frequentes
Qscroll-snap-type e scroll-behavior: smooth entram em conflito?
ANão — elas têm funções diferentes e são usadas juntas com frequência. scroll-snap-type decide onde você para: a rolagem faz o snap a um ponto quando para. scroll-behavior decide como você chega lá: com uma animação suave. Usando ambas, a rolagem desliza primeiro e depois faz o snap com precisão — a combinação padrão para carrosséis e rolagem em tela cheia.
QPor que meu scroll-snap-type não está fazendo snap nos elementos filhos?
AA causa mais comum é a ausência de scroll-snap-align nos filhos, então não há ponto de snap para capturar; ou o tamanho do contêiner não corresponde aos filhos, então não existe posição de snap alcançável ao parar; ou o conteúdo não transborda, então o contêiner nem sequer rola. Verifique se o contêiner realmente rola e se os filhos definem scroll-snap-align: start/center/end.
QQual é a diferença entre mandatory e proximity no scroll-snap-type?
Amandatory sempre faz snap: quando a rolagem para, ajusta-se ao ponto de snap mais próximo mesmo que você tenha movido pouco. proximity faz o snap de forma tolerante: só ajusta quando a posição de parada está perto de um ponto de snap, caso contrário para livremente. mandatory dá uma sensação estável, mas pode dificultar parar em conteúdos intermediários; proximity é mais natural e serve para contêineres densos.
QQuão boa é a compatibilidade do scroll-snap-type entre navegadores e dispositivos?
AChrome, Edge, Firefox e Safari de desktop são compatíveis, mas o Safari usou a especificação antiga por muito tempo, exigindo o prefixo -webkit-scroll-snap-type com uma sintaxe diferente. Chrome 69+ e Firefox 68+ suportam a nova especificação. No mobile, o iOS Safari 13+ funciona; para iOS mais antigo, atenção às diferenças de prefixo.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
