Carrega mais itens automaticamente conforme o usuário se aproxima do fim da página.
Scroll infinito clássico — em vez de um botão "carregar mais", o próximo lote de itens chega sozinho.
Escuta o scroll da janela e calcula a distância até o fim do documento; quando fica menor que o limiar configurado, dispara a busca da próxima página automaticamente.
Post #1 — Introdução ao SWCore
Componentes prontos, sem dependência externa.
Post #2 — Animação
Reveal, parallax, pin e mais, com Tailwind.
Post #3 — Ícones
Mais de 1000 glifos embutidos, zero peso extra.
Esta caixinha usa um IntersectionObserver isolado e dados falsos só pra ilustrar visualmente — o componente real ([sw-infinite], exemplo 2 abaixo) monitora o scroll da janela inteira, não de um container.
<!-- Só ilustrativo — esta caixa NÃO usa [sw-infinite] de verdade, é uma simulação isolada
(IntersectionObserver escopado a este container) pra caber numa demo pequena.
Pra sintaxe real do componente, veja o Exemplo 2 abaixo. -->
<div id="lista">
<!-- itens carregados aparecem aqui -->
</div>
<div id="sentinela">Role para carregar mais…</div><!-- URL real e testável — os mesmos arquivos usados na demo acima (docs/assets/demo-infinite-page1.html,
-page2.html, -page3.html vazio pra marcar o fim). Copie esta página e teste sem precisar de backend
nenhum; na sua aplicação real, troque só a URL por um endpoint seu que devolva HTML da mesma forma. -->
<div id="lista"><!-- itens aqui --></div>
<div sw-infinite
sw-infinite-url="assets/demo-infinite-page{page}.html"
sw-infinite-target="#lista"
sw-infinite-offset="300">
</div>offset, dispara{page} substituído pelo número atualtargetsw:infinite:end — fim da listaconst el = document.querySelector('[sw-infinite]');
el.addEventListener('sw:infinite:load', (e) => {
console.log('Página carregada:', e.detail.page);
console.log('Itens adicionados:', e.detail.items.length);
});
el.addEventListener('sw:infinite:end', () => {
console.log('Não há mais itens');
});
el.addEventListener('sw:infinite:error', (e) => {
console.warn('Erro na página:', e.detail.page);
});sw-infinite-url{page} no lugar do número da página, ex.: "/api/posts?page={page}"sw-infinite-targetsw-infinite-offsetsw-infinite-startNenhum.
sw:infinite:loadsw:infinite:endsw:infinite:errorNenhum.
Nenhuma.
