Melhore a Interaction to Next Paint abandonando a rolagem via JavaScript

Substitua a rolagem via JavaScript por CSS hoje

Este blog tem um pouco de história. Até 2017, a única maneira de adicionar um comportamento de rolagem suave e consistente era usar uma biblioteca JavaScript. E muitos desenvolvedores faziam exatamente isso. Os Core Web Vitals ainda não existiam e todos usavam jQuery como sua principal biblioteca JavaScript.

Agora avance para os dias atuais. Existem alternativas muito melhores, mais rápidas e mais fáceis para a rolagem de âncora baseada em JavaScript. No entanto, como consultor de Core Web Vitals, ainda as vejo todos os dias.

Última revisão por Arjen Karel em fevereiro de 2026

Por que a rolagem baseada em JavaScript é 'ruim'

A rolagem baseada em JavaScript é ruim por 2 motivos: é complicada e é lenta.

Complicado: A rolagem baseada em JavaScript é desnecessariamente complicada. Você tem que escrever e manter um código difícil de ler e, embora o método Window.scrollTo() tenha tornado este código muito mais fácil, ele ainda é muito mais difícil de manter do que uma única linha de CSS.

Lento. O JavaScript tende a bloquear a thread principal e é sempre mais lento do que seu equivalente em CSS. Dependendo de como a função de rolagem foi implementada, ela pode bloquear a thread principal por um bom tempo e causar um grande atraso na métrica de Interaction to Next Paint! De acordo com o Web Almanac de 2025, a mediana do Total Blocking Time em dispositivos móveis é de 1.916 milissegundos. Cada função JavaScript desnecessária competindo pela thread principal piora isso.

Por que a rolagem suave com CSS (CSS Smooth Scrolling) é 'boa'

Eu falei sobre por que a rolagem baseada em JavaScript é ruim. O oposto é verdadeiro para a rolagem suave baseada em CSS. Realmente é tão simples quanto adicionar o seguinte à sua folha de estilos:

html{ scroll-behavior: smooth;}

Simples e eficaz

A linha única de CSS html { scroll-behavior: smooth; } é super simples de implementar e mais eficiente do que as soluções baseadas em JavaScript. Esta única linha de código ativa a rolagem suave para a página inteira sem nenhuma função JavaScript difícil de manter. Se você quiser ir além e adiar ou remover totalmente o JavaScript desnecessário, o tempo de processamento da sua INP agradecerá.

Melhor Desempenho

A rolagem suave baseada em CSS é tratada nativamente pelo navegador e, em todos os casos, superará as implementações em JavaScript. Isso é especialmente importante para otimizar a métrica Interaction to Next Paint (INP), pois será um peso menor para a thread principal do navegador. Os manipuladores de rolagem em JavaScript precisam ser executados na thread principal, e cada milissegundo gasto lá é um milissegundo que atrasa a próxima interação do usuário. O comportamento de rolagem do CSS é executado inteiramente fora da thread principal. Se você ainda tem JavaScript que precisa ser executado durante as interações, leia sobre como fazer yield para a thread principal.

A rolagem de âncora suave é apenas o começo. O CSS está assumindo mais responsabilidades de rolagem que antes exigiam JavaScript. As animações guiadas por rolagem (Scroll-driven animations) (Chrome 115+, Safari 26) permitem vincular o progresso da animação à posição de rolagem, substituindo totalmente os manipuladores de rolagem com requestAnimationFrame. As animações acionadas por rolagem (Scroll-triggered animations) (Chrome 145) disparam animações baseadas em tempo ao cruzar um deslocamento de rolagem, substituindo o IntersectionObserver para efeitos de revelação. E as consultas de contêiner de estado de rolagem (scroll-state container queries) (Chrome 133+) permitem estilizar elementos com base em se eles estão fixos (stuck), encaixados (snapped) ou roláveis (scrollable), sem a necessidade de JavaScript. A tendência é clara: mova a lógica de rolagem do JavaScript para o CSS sempre que puder.

Compatibilidade de Navegadores

A rolagem suave do CSS tem 95% de suporte global nos navegadores de acordo com o CanIUse. Ela tem sido padrão (baseline) em todos os principais navegadores desde março de 2022. Navegadores antigos, onde a rolagem suave não é suportada, simplesmente usam o fallback para o salto direto padrão para a âncora.

Fácil Personalização

O CSS permite personalizar facilmente o comportamento de rolagem. Por exemplo, a propriedade scroll-margin-top permite definir a distância superior em relação ao elemento rolado:

h1, h2, h3 {scroll-margin-top: 5rem;} 

Ou ainda mais fácil com a pseudo-classe 'target'

:target {scroll-margin-top: 5rem;} 

Respeite as preferências de movimento

Alguns usuários sentem enjoo por causa das animações de rolagem. Envolver sua rolagem suave em uma media query prefers-reduced-motion garante que esses usuários obtenham saltos instantâneos em vez disso:

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

Isso aplica a rolagem suave apenas para usuários que não solicitaram redução de movimento. Usuários com distúrbios vestibulares ou sensibilidade ao movimento verão a rolagem instantânea padrão.

Exemplo completo

Para ver este código em ação, basta clicar no Índice (Table of Contents) no topo desta página. Você notará uma bela rolagem suave até a âncora clicada.

Aqui está um exemplo simplificado para você copiar e reutilizar

<html>

<head>
    <title>Smooth scroll to target</title>
    <style>
        html {
            scroll-behavior: smooth;
        }
        :target {
            scroll-margin-top: 5rem;
        }
        .largedivider {
            height: 1000px;
        }

    </style>

</head>

<body>
    <nav>
        <a href="#target">scroll to target</a>
    </nav>
    <div class="largedivider"> -- </div>
    <h2 id="target">scroll to me</h2>
    <div class="largedivider"> -- </div>
</body>

</html>