Propriedade Scroll Behavior
Última atualização: 2026-09-13
scroll-behavior Propriedade Scroll Behavior
A propriedade scroll-behavior controla se a rolagem salta para o destino instantaneamente ou anima suavemente. Com smooth, clicar em um link de âncora ou rolar via JavaScript desliza até a posição alvo em vez de pular, melhorando visivelmente a experiência do usuário.
| Categoria | |
|---|---|
| Valor Inicial | auto |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
scroll-behavior: auto | smooth;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
auto | smooth | Palavra-chave | O comportamento de rolagem |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| scroll-behavior | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Suportado em todos os principais navegadores | |||||
Dica： Definir scroll-behavior: smooth no elemento html ou no contêiner de rolagem raiz aplica-o globalmente.
Aviso： A rolagem suave respeita a configuração de acessibilidade prefers-reduced-motion do usuário; se o usuário ativou a redução de movimento, o navegador ignora automaticamente o valor smooth.
❓ Perguntas Frequentes
QO scroll-behavior: smooth afeta o window.scrollTo() no JavaScript?
ASim. Contanto que o contêiner de rolagem tenha scroll-behavior: smooth, window.scrollTo, scrollBy e scrollIntoView rolam suavemente por padrão; você também pode passar explicitamente { behavior: 'smooth' } no JavaScript para substituir. Observe que os saltos de âncora acontecem no contêiner de rolagem mais próximo.
QPor que minha rolagem suave em CSS não funciona na página no navegador?
ADepure em ordem: verifique se a propriedade está no elemento que realmente rola (a rolagem em nível de página é html, a rolagem interna é o elemento overflow); verifique se o prefers-reduced-motion: reduce do sistema a substitui (as configurações de redução de movimento forçam o smooth a ser ignorado); e verifique se o JavaScript substitui o padrão com behavior: 'auto'.
QA propriedade scroll-behavior: smooth afeta o desempenho da página?
AA rolagem suave é implementada nativamente pelo navegador e a rolagem roda no thread de composição sem bloquear o thread principal, então o custo de desempenho é pequeno. No entanto, se reflows ou repaints pesados acontecerem durante a rolagem — imagens carregadas sob demanda, ouvintes de scroll que mudam estilos — ainda pode engasgar. Evite trabalho caro em eventos de scroll ou use ouvintes passivos para otimizar.
QQual é a diferença entre scroll-behavior e o scroll suave em JavaScript?
AO scroll-behavior: smooth é dirigido nativamente pelo navegador: não precisa de JavaScript, tem bom desempenho e respeita automaticamente o prefers-reduced-motion. O JavaScript (rolagem manual com requestAnimationFrame) dá mais controle — easing personalizado, rolagem até offsets exatos — mas exige mais código. Quando o CSS resolve, prefira o CSS.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
