JS Module

Infinite Scroll Y2Inf

Carrega mais conteúdo automaticamente ao atingir o fim da página ou de um container - via AJAX com URL template.

1. Demo - Role até o fim

Post #1 - Introdução ao Y2

Framework CSS + JS para projetos web modernos.

Post #2 - Componentes CSS

Botões, badges, chips e muito mais.

Post #3 - Módulos JavaScript

Mais de 30 módulos JS prontos para usar.

Role para carregar mais...

2. Como Funciona

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

1 Usuário rola a página
2 Y2Inf calcula distância até o fim - se < offset, dispara
3 Fetch na URL com {page} substituído
4 HTML da resposta é inserido no target
5 Se a resposta for vazia, dispara yd:y2infinite:end

3. URL Template

Use {page} na URL - Y2Inf substitui pelo número da página atual automaticamente.

O servidor deve retornar HTML puro (fragmentos inseridos diretamente) ou uma string vazia quando não houver mais itens.

// Escutar eventos
const sentinel = document.querySelector('[y2infinite]');

sentinel.addEventListener('yd:y2infinite:load', e => {
    console.log('Página carregada:', e.detail.page);
    console.log('Itens adicionados:', e.detail.items.length);
});

sentinel.addEventListener('yd:y2infinite:end', () => {
    console.log('Não há mais itens');
});

sentinel.addEventListener('yd:y2infinite:error', e => {
    console.warn('Erro na página:', e.detail.page);
});

Quick Reference

Atributo / Evento Elemento Descrição
y2infinite div Ativa o infinite scroll no sentinel
y2infinite-url div URL com {page} substituído a cada load
y2infinite-target div Seletor do container onde os itens são inseridos (padrão: body)
y2infinite-offset div Distância em px do fim para disparar o load (padrão: 300)
y2infinite-start div Página inicial (padrão: 1)
yd:y2infinite:load evento Disparado após cada load - detail: { page, items }
yd:y2infinite:end evento Disparado quando a resposta é vazia (sem mais itens)
yd:y2infinite:error evento Disparado em caso de erro no fetch - detail: { page }