Entendendo e Implementando o Scroll Infinito com JavaScript

O que é Scroll Infinito?

Você já deve ter visto sites como lojas online em que ao descer a página os produtos vão aparecendo de forma continua. Outro exemplo é o do endless.horse, ele pode parecer simples mas é um excelente exemplo para demonstrar a funcionalidade do "Scrolls infinito". Ao acessar o site, você vê um cavalo, mas ao rolar a página para baixo, percebe que as pernas do cavalo continuam a crescer indefinidamente, e nunca se chega aos pés do cavalo.

Implementando Scroll Infinito

Esta funcionalidade é amplamente utilizada no desenvolvimento moderno. Podemos ver o scroll infinito em ação nas principais redes sociais, como Twitter, Facebook e especialmente no Instagram, onde o conteúdo parece nunca acabar à medida que rolamos a página.

Neste artigo, vou demonstrar uma implementação básica dessa funcionalidade. No entanto, esta abordagem não aborda questões como problemas com consultas demoradas, implementação de cache e outras soluções necessárias para aplicações em produção. Ainda assim, este é um ponto de partida para entender como podemos implementar esse recurso.

Passo 1: Decida onde adicionar a funcionalidade de scroll infinito

Primeiro, decida onde você vai adicionar a funcionalidade de scroll infinito. Será uma lista de postagens ou de imagens? Também será necessário decidir de onde virão os dados. Para este exemplo, vamos usar imagens de uma API básica, o Random Fox API.

Passo 2: Crie seu arquivo HTML

Crie o arquivo HTML e inclua um contêiner para suas imagens de raposas aleatórias.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fox Images</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 class="header">Fox Images</h1>
<div class="container"></div>
<script src="script.js"></script>
</body>
</html>

Passo 3: Crie seu arquivo CSS

Para este exemplo, manteremos a folha de estilos bem simples.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.header {
  font-size: 32px;
  color: black;
  text-align: center;
  font-family: Verdana, sans-serif;
}

img {
  width: 400px;
  height: 400px;
  margin: 4px;
  object-fit: cover;
}

Passo 4: Crie seu arquivo JavaScript

Selecione o contêiner e pegue a URL da Random Fox API. Não se esqueça de linkar seus arquivos JavaScript e CSS no HTML.

const container = document.querySelector('.container');
const URL = "https://randomfox.ca/images/";

function getRandomNumber() {
  return Math.floor(Math.random() * 100);
}

function loadImages(numImages = 6) {
  let i = 0;
  while (i < numImages) {
    const img = document.createElement('img');
    img.src = `${URL}${getRandomNumber()}.jpg`;
    container.appendChild(img);
    i++;
  }
}

loadImages();

Passo 5: Adicione o Evento de Scroll

Para implementar a funcionalidade de scroll infinito, adicione este event listener:

window.addEventListener('scroll', () => {
  if (window.scrollY + window.innerHeight >= document.documentElement.scrollHeight) {
    loadImages();
  }
});

Se a soma de scrollY e innerHeight for maior ou igual a scrollHeight, significa que chegamos ao fim do documento e, portanto, precisamos carregar mais imagens.

Conclusão

Sua página agora deve estar funcional com a técnica de scroll infinito. Aqui está um desafio para você: tente refazer este projeto usando uma outra API de sua escolha, implemente também algum estilo mais elaborado para exibir seus items. Boa sorte!

Blog