Melhore o Interaction to Next Paint abandonando o scrolling com JavaScript

Substitua o scrolling JavaScript por CSS hoje

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

Agora avance até os dias atuais. Existem alternativas muito melhores, mais rápidas e mais fáceis ao scrolling de âncora baseado em JavaScript. No entanto, como consultor de Core Web Vitals, ainda os vejo todos os dias.

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

Por que o scrolling baseado em JavaScript é 'ruim'

O scrolling baseado em JavaScript é ruim por 2 razões: é complicado e é lento.

Complicado: O scrolling baseado em JavaScript é desnecessariamente complicado. Você precisa escrever e manter código difícil de ler e, embora o método Window.scrollTo() tenha tornado esse código muito mais fácil, ainda é muito mais difícil de manter do que uma única linha de CSS.

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

Por que o CSS Smooth Scrolling é 'bom'

Falei sobre por que o scrolling baseado 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

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

Melhor desempenho

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

A rolagem suave de âncora é apenas o começo. CSS está assumindo mais responsabilidades de scroll que antes exigiam JavaScript. Animações orientadas por scroll (Chrome 115+, Safari 26) permitem vincular o progresso da animação à posição de scroll, substituindo completamente os manipuladores de scroll com requestAnimationFrame. Animações acionadas por scroll (Chrome 145) disparam animações baseadas em tempo ao cruzar um offset de scroll, substituindo IntersectionObserver para efeitos de revelação. E consultas de contêiner scroll-state (Chrome 133+) permitem estilizar elementos com base em se estão fixados, encaixados ou roláveis, sem necessidade de JavaScript. A tendência é clara: mova a lógica de scroll do JavaScript para CSS sempre que puder.

Compatibilidade de navegadores

O CSS smooth scrolling tem 95% de suporte global de navegadores segundo o CanIUse. É baseline em todos os principais navegadores desde março de 2022. Navegadores antigos, onde a rolagem suave não é suportada, simplesmente voltam ao salto direto padrão para a âncora.

Personalização fácil

CSS permite personalizar facilmente o comportamento de scroll. Por exemplo, a propriedade scroll-margin-top permite definir a distância superior até o elemento rolado:

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

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

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

Respeitar preferências de movimento

Alguns usuários sentem enjoo com animações de scroll. Envolver sua rolagem suave em uma media query prefers-reduced-motion garante que esses usuários recebam 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 movimento reduzido. 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, simplesmente clique no Índice 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>