Implementação de rolagem infinita

A rolagem infinita carrega mais conteúdo à medida que o usuário se aproxima do fim da lista. A implementação mais simples usa IntersectionObserver: coloque um elemento "sentinel" no fim da lista e observe-o. Quando o sentinel entrar na área visível, busque a próxima page.

Anexe um <div> invisível (ou um marcador de "carregando...") após o último item da lista. Observe-o com IntersectionObserver. Quando houver interseção, isso indica que o usuário rolou para perto do fim — é hora de buscar mais conteúdo.

Ao ocorrer uma interseção: busque a próxima page, renderize os novos itens e reposicione o sentinel (ele permanece automaticamente no fim da lista se os itens forem anexados antes dele). Não é necessário deixar de observar e observar novamente — o sentinel continua sendo observado.

Uma variável booleana loading impede o acúmulo de solicitações se o usuário rolar rapidamente e provocar várias interseções antes da chegada da primeira resposta. Sem ela, a mesma page é buscada repetidamente e os itens aparecem duplicados.

Quando o servidor retornar uma page vazia (ou indicar "não há mais"), deixe de observar o sentinel e substitua-o por uma mensagem de fim de lista. Interseções futuras não iniciarão buscas; o usuário verá que chegou ao fim.

Envolva a busca em try/catch. Em caso de erro, mantenha loading = true para que novas tentativas não sejam disparadas automaticamente; mostre um botão "Tentar novamente" que redefina loading e acione o carregamento outra vez. Sem isso, falhas de rede provocam ondas de novas tentativas.

rootMargin: "500px" inicia a próxima busca 500 pixels antes de o usuário chegar ao sentinel. Ajuste o valor com base na altura dos itens e na velocidade média de rolagem — se for pequeno demais, os usuários encontrarão a mensagem "nenhum conteúdo ainda"; se for grande demais, você buscará conteúdo antes de precisar dele.

Quando o usuário sair da página e voltar, a posição de rolagem deverá ser preservada AND os itens carregados anteriormente deverão ser renderizados novamente. Armazene os itens em sessionStorage ou em um armazenamento no estilo Zustand; restaure-os na montagem e use scrollTo para retornar ao deslocamento lembrado.

Rolagens infinitas longas acumulam milhares de nós do DOM. Para um feed muito longo (Twitter, Facebook), combine com janelamento: remova do DOM os itens acima da área visível e restaure-os ao rolar para cima. Bibliotecas como react-virtual ou @tanstack/virtual fazem isso com eficiência.

A rolagem infinita é hostil a usuários de teclado e leitores de tela que não conseguem chegar facilmente ao rodapé. Ofereça um botão alternativo "Carregar mais" como alternativa e garanta que a página tenha um rodapé real acessível pelas teclas Início/Fim. Uma região aria-live que anuncie os novos itens também ajuda.

A rolagem com efeito de elástico do iOS pode provocar várias interseções perto do fim. A proteção de carregamento lida com a maioria dos casos; também pode ser útil aplicar uma espera antirruído de 300 ms para filtrar a sequência de interseções durante o efeito de elástico.

As APIs do servidor devem retornar um "próximo cursor" em vez de depender de números de page controlados pelo cliente — uma abordagem resistente a inserções e exclusões de itens durante a rolagem. O cliente envia o cursor em cada solicitação e para quando o servidor não retorna um cursor.

Por que um indicador de "carregamento" é necessário em um callback de rolagem infinita do IntersectionObserver?

A rolagem infinita usa um IntersectionObserver em um elemento sentinela no final da lista. Ao ocorrer a interseção, busque a próxima página, renderize-a e continue observando. Proteja com um indicador de carregamento, trate o fim dos dados e os erros de forma adequada e ajuste rootMargin para a distância de pré-busca. Ofereça alternativas de teclado (botão "Carregar mais") e considere o uso de janelas para feeds muito longos.