Como Tornar o Scroll do Site Realmente Suave Sem Quebrar a Acessibilidade

Você já visitou algum site onde o scroll parece "melado" ou, ao contrário, muito abrupto? Designers adoram scroll suave porque ele adiciona polimento e uma sensação premium à interface. Mas para desenvolvedores, frequentemente vira um pesadelo: bibliotecas padrão de scroll suave frequentemente quebram navegação nativa, conflitam com position: sticky, ou fazem o navegador sofrer com baixa taxa de quadros.

Recentemente encontrei o Lenis da equipe darkroom.engineering. Essas pessoas abordaram o problema de forma diferente: em vez de substituir completamente o comportamento do navegador, eles criaram uma camada leve que funciona sobre o scroll nativo.

Qual é o Problema Principal com Bibliotecas Comuns

A maioria das ferramentas de scroll suave simplesmente "desabilita" o scroll padrão e tenta imitá-lo através de transforms (transforms CSS). Isso faz com que coisas como foco de teclado, busca na página (Cmd+F) e funcionalidade de leitores de tela quebrem.

Lenis (do latim — "suave") preserva o scroll nativo. Isso significa que seu anchor links funcionará, e o navegador ainda entenderá exatamente onde o usuário está na página. Além disso, a biblioteca tem apenas alguns kilobytes e não arrasta junto um monte de dependências.

O que o Lenis Pode Fazer

A biblioteca resolve vários pontos dolorosos dos desenvolvedores frontend de uma vez.

Sincronização com WebGL e Animações

Se você está construindo efeitos complexos de parallax ou vinculando scroll a canvas (WebGL), você precisa de uma única fonte de verdade para a posição do scroll. Lenis funciona perfeitamente com GSAP ScrollTrigger. Na minha experiência, essa é a forma mais estável de evitar que elementos "tremam" durante scroll rápido.

Trabalhando com Qualquer Eixo

Você pode configurar suavidade para scroll vertical, horizontal ou até mesmo aninhado. O último é especialmente interessante: frequentemente você precisa que a página principal role suavemente enquanto algum bloco modal dentro dela vive sua própria vida.

Suporte a Frameworks

Embora eu prefira vanilla JS para coisas assim, o projeto tem adaptadores oficiais para React, Vue e até Framer. Isso economiza tempo passando refs e gerenciamento de ciclo de vida de componentes.

Como Começar

A instalação é padrão:

npm i lenis

A inicialização básica é tão simples quanto possível. Você pode habilitar o loop de animação automático (autoRaf) para não ter que mexer com requestAnimationFrame manualmente:

import Lenis from 'lenis'
import 'lenis/dist/lenis.css'

const lenis = new Lenis({
  autoRaf: true,
});

// Можно подписаться на события, если нужно обновлять свои анимации
lenis.on('scroll', (e) => {
  console.log('Текущая позиция:', e.scroll);
});

Se você está usando GSAP (e para sites legais, é o padrão de fato), a integração será um pouco mais complexa, mas mais confiável:

const lenis = new Lenis();

lenis.on('scroll', ScrollTrigger.update);

gsap.ticker.add((time) => {
  lenis.raf(time * 1000);
});

gsap.ticker.lagSmoothing(0);

Pequenos Detalhes e Limitações

Apesar de ser muito legal, Lenis tem suas peculiaridades. Por exemplo, no Safari, as atualizações de taxa de quadros podem ser limitadas a 60 FPS (ou até 30 FPS em modo de baixo consumo), o que às vezes pode ser perceptível em monitores de alta taxa de atualização.

Outra coisa — iframe. Scroll dentro de iframes não será suave, pois eles não propagam eventos de roda do mouse para fora. Esta é uma restrição de segurança do navegador, e a biblioteca não pode fazer nada sobre isso.

Se você tem elementos na página que devem rolar normalmente (como um campo de texto ou menu suspenso), use o atributo data-lenis-prevent. Isso vai te salvar de comportamento estranho da interface.

Vale a Pena Implementar

Se você está construindo uma landing page, portfólio ou site promocional onde a estética importa — definitivamente sim. Lenis te dá aquele efeito "caro" sem comprometer a acessibilidade.

Para dashboards pesados ou painéis de administração com toneladas de tabelas, eu provavelmente seguraria. Lá, uma camada extra de abstração sobre o scroll só pode atrapalhar os usuários navegando rapidamente pelos dados.

No geral, é uma das ferramentas mais limpas e com melhor desempenho em sua categoria hoje. Confira o Showcase deles — tem exemplos verdadeiramente impressionantes de como um scroll comum se torna parte da narrativa visual.