JS Component

Infinite Scroll [sw-infinite]

Carrega mais conteúdo automaticamente ao se aproximar do fim da página — via AJAX, com URL de template.

1. Demo — role até o fim

Post #1 — Introdução ao SW

Framework CSS + JS sem dependências.

Post #2 — Componentes CSS

Botões, badges, chips e muito mais.

Post #3 — Módulos JavaScript

Dezenas de módulos prontos pra usar.

Role para carregar mais…

A demo acima usa uma pequena caixa com scroll próprio e dados falsos só pra ilustrar — o componente de verdade ([sw-infinite], código acima) monitora o scroll da janela, não de um container isolado.

2. Como funciona

O componente monitora o scroll da window. Quando a distância até o fim da página cai abaixo de sw-infinite-offset, faz um fetch na URL com {page} substituído pelo número atual. O HTML retornado é inserido no sw-infinite-target.

1Usuário rola a página

2O componente calcula a distância até o fim — se menor que o offset, dispara

3Fetch na URL, com {page} substituído

4HTML da resposta é inserido no target

5Se a resposta vier vazia, dispara sw:infinite:end — fim da lista

3. URL de template e eventos

Use {page} na URL — o componente substitui pelo número da página atual a cada carregamento.

O servidor deve devolver HTML puro (elementos prontos pra inserir) — ou uma resposta vazia quando não houver mais itens.

Atributo/Evento	Padrão	Descrição
`sw-infinite-url`	—	URL do endpoint, com `{page}` como placeholder.
`sw-infinite-target`	`body`	Seletor onde os novos itens são anexados.
`sw-infinite-offset`	`300`	Distância (px) do fim da página que dispara o carregamento.
`sw-infinite-start`	`1`	Página inicial.
`.sw-infinite-loader`	—	Elemento de "Carregando…" inserido/removido automaticamente durante o fetch.
`sw:infinite:load`	—	`detail.page`, `detail.items`.
`sw:infinite:end`	—	Disparado quando o endpoint devolve vazio.
`sw:infinite:error`	—	`detail.page` — falha na requisição.