14.11.2024

"Animação de Rolagem Sem jQuery: Uma Solução"

Resposta Rápida

Para implementar uma animação suave de rolagem, JavaScript básico é suficiente. Recomenda-se usar a função requestAnimationFrame para garantir um desempenho elevado na animação. Aqui está um exemplo de código simplificado:

const smoothScrollTo = (final, duracao) => {
  const inicio = window.scrollY;
  const mudanca = final - inicio;
  let tempoAtual = 0;

  const easeInOutQuad = (tempo, inicio, mudanca, duracao) => {
    tempo /= duracao / 2;
    if (tempo < 1) return (mudanca / 2) * tempo * tempo + inicio;
    tempo--;
    return (-mudanca / 2) * (tempo * (tempo - 2) - 1) + inicio;
  };

  const animaRolagem = () => {
    tempoAtual += 20;
    const val = easeInOutQuad(tempoAtual, inicio, mudanca, duracao);
    window.scrollTo(0, val);
    if (tempoAtual < duracao) {
      requestAnimationFrame(animaRolagem);
    }
  };
  animaRolagem();
};

smoothScrollTo(0, 1000); // Rolagem suave para cima em 1 segundo, sem pausas desnecessárias.

A função smoothScrollTo nos ajuda a atingir suavemente uma posição especificada usando a animação dinâmica gerada pela função easeInOutQuad.

Manter o desempenho é crítico para evitar rolagem lenta. requestAnimationFrame é uma ferramenta para navegadores modernos que garante taxas de quadros consistentes e uso ideal da CPU.

Entendendo a Essência - Função de Easing

A função easeInOutQuad atua como uma varinha mágica no mundo das animações, permitindo ações que imitam acelerações e desacelerações naturais.

O efeito ease-in-out que estamos aplicando cria uma experiência de rolagem suave: começa devagar, acelera e, em seguida, desacelera novamente até o final.

Todos os Navegadores São Iguais, Mas Alguns São Mais Iguais Que Outros

Testar o script em diferentes navegadores é um passo essencial. requestAnimationFrame é suportado pela maioria deles, mas versões mais antigas podem ter problemas, exigindo um polyfill. Por exemplo, window.scrollY não é reconhecido em versões antigas do Internet Explorer; uma alternativa seria document.documentElement.scrollTop.

Desempenho e Alternativas para Navegadores

Animações podem impactar o desempenho, especialmente em dispositivos mais fracos. Nossa função utiliza requestAnimationFrame para otimizar animações e manter taxas de quadros suaves, minimizando a carga da CPU.

Para navegadores que não suportam requestAnimationFrame, uma alternativa usando setTimeout pode ser empregada:

// Recuo para setTimeout se requestAnimationFrame não estiver disponível
window.requestAnimationFrame = window.requestAnimationFrame || function(callback) { 
  return setTimeout(callback, 1000 / 60);
}

Visualização: Uma Jornada Até o Topo

É possível visualizar a rolagem suave como uma viagem sem usar a autoestrada do jQuery:

Janela do Navegador 🖼️ : |______________📍(Você Está Aqui)_______________|
    ↗️↗️↗️↗️↗️ (Movimento Suave Para Cima)
Destino 🏁: |___________________________________________|

Cada seta ↗️ simboliza nosso passo em direção ao topo da página. O método scrollTo nos permitirá chegar lá suavemente, confiando somente nas ferramentas padrão do JavaScript.

Implementando Versatilidade e Manutenibilidade para Sua Rolagem

A limpeza e simplicidade no código são aspectos-chave ao criar animações de rolagem.

Função de Easing: Em Desenvolvimento

Extraia a função de easing do código principal de smoothScrollTo. Isso será benéfico se você precisar de diferentes algoritmos de easing ou decidir usá-los em outras animações.

const easeInOutQuad = (tempo, inicio, mudanca, duracao) => { /* ... */ };

Acordo de Parâmetros

Inserir parâmetros para as posições inicial e final na função a torna mais flexível e permite rolar para qualquer local no documento.

const smoothScrollTo = (inicio, final, duracao) => { /* ... */ };

Tratamento de Exceções de Forma Elegante

Assegure-se de que sua implementação pode lidar com erros e casos extremos de maneira elegante. Por exemplo, quando a duração não for um número positivo ou a posição alvo exceder o tamanho do documento:

// Valide a duração e trate erros
if (duracao <= 0 || typeof duracao !== 'number') {
  console.error('Duração inválida: o valor deve ser um número positivo');
}

Recursos Úteis

1. Elemento: propriedade scrollTop - API Web | MDN — tudo detalhado sobre a propriedade scrollTop.
2. Janela: método requestAnimationFrame() - API Web | MDN — um método para criar animações eficientes.
3. Rolagem Suave | CSS-Tricks — dominando a rolagem suave sem usar jQuery.
4. Animação scrollTop Sem jQuery - Stack Overflow — exemplos reais e discussões sobre o tema.
5. Como Criar Um Efeito de Rolagem Suave — um tutorial sobre como criar rolagem suave.
6. Guia para Ajax Puro Sem jQuery — SitePoint — utilizando Ajax sem jQuery.
7. Animações em JavaScript — conceitos sobre animações em JS.

Video

Navigation