JavaScript Academy · Aula

Rolagem infinita

Carregue mais conteúdo conforme o usuário rola a página.

Rolagem infinita é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 4 aulas no total.

O que é rolagem infinita

A rolagem infinita carrega mais conteúdo automaticamente quando o usuário se aproxima do fim de uma lista, em vez de exigir um clique em Próxima página. Feeds de redes sociais e resultados de pesquisa costumam usá-la.

O padrão sentinel

A técnica mais organizada usa um sentinel: um elemento vazio colocado no final da lista. Quando o sentinel entra na área de visualização, busque e anexe o próximo lote.

// Markup pattern:
// <ul id="feed"> ...items... </ul>
// <div id="sentinel"></div>  <!-- trigger element -->

Observando o sentinel

Associe um observer de interseção ao sentinel. Como ele fica depois do último item, sua visibilidade indica que o usuário chegou ao fim.

const sentinel = document.getElementById('sentinel');
const observer = new IntersectionObserver(onIntersect, {
  rootMargin: '200px' // load a bit early
});
observer.observe(sentinel);

Acionando um carregamento

Na função de retorno, verifique isIntersecting. Quando o valor for verdadeiro, carregue a próxima página de dados.

function onIntersect(entries) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      loadMoreItems();
    }
  });
}

Acompanhando a página

Mantenha um contador de páginas para que cada carregamento busque o próximo trecho. Incremente-o depois de uma busca bem-sucedida.

let page = 1;

async function loadMoreItems() {
  const items = await fetchPage(page);
  appendItems(items);
  page++;
}

Evitando carregamentos duplicados

A função de retorno pode ser acionada repetidamente. Use um sinalizador loading para que uma nova busca não comece enquanto outra estiver em andamento.

let loading = false;

async function loadMoreItems() {
  if (loading) return;
  loading = true;
  const items = await fetchPage(page);
  appendItems(items);
  page++;
  loading = false;
}

Anexando novos itens

Adicione os itens buscados antes do sentinel para que ele continue no final da lista em crescimento, pronto para acionar o próximo carregamento.

function appendItems(items) {
  const feed = document.getElementById('feed');
  items.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item.title;
    feed.appendChild(li);
  });
}

Parando no fim

Quando o servidor não retornar mais dados, desconecte o observer para que ele pare de tentar carregar. Isso evita solicitações vazias sem fim.

const items = await fetchPage(page);
if (items.length === 0) {
  observer.disconnect(); // no more data
  return;
}

Por que rootMargin ajuda

Um rootMargin generoso, como 200px, começa a carregar antes de o usuário chegar ao fim, fazendo com que os novos itens apareçam sem interrupções e sem uma pausa visível.

new IntersectionObserver(onIntersect, {
  rootMargin: '300px' // begin loading well before the end
});

Considerações de acessibilidade

A rolagem infinita pode prender usuários de teclado e leitores de tela, além de ocultar o rodapé. Considere oferecer um botão manual Carregar mais como alternativa e anuncie o novo conteúdo de forma discreta usando regiões dinâmicas do ARIA.

O fluxo completo

Rolagem infinita com um observer de interseção: coloque um sentinel, observe-o, carregue e anexe os dados quando ele aparecer, evite carregamentos duplicados e desconecte o observer quando os dados acabarem. Não é necessário fazer cálculos de rolagem.

Verificação rápida

Teste sua compreensão da rolagem infinita.

Recapitulação

Você criou a rolagem infinita:

Coloque um elemento sentinel depois da lista.
Observe-o com um observer de interseção.
Na interseção, busque e anexe a próxima página.
Use um sinalizador loading para evitar buscas duplicadas.
Desconecte o observer quando os dados acabarem.

Agora, vamos conhecer as animações acionadas pela rolagem.

Perguntas Frequentes

A aula “Rolagem infinita” é grátis?

Sim — o texto completo de “Rolagem infinita” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 4 aulas no total.

O que vou aprender em “Rolagem infinita”?

Carregue mais conteúdo conforme o usuário rola a página. Você pratica JavaScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar JavaScript Academy?

Nenhuma experiência prévia é necessária. JavaScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Rolagem infinita”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de JavaScript Academy?

Sim. Cada aula de JavaScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para JavaScript Academy