Barra de rolagem dinâmica com Ajax
Um recurso muito interessante do Google Reader é a área onde são listados os posts dos feeds que você assina. Quando os posts são carregados, apenas alguns aparecem na tela, e conforme você vai rolando aquela página para baixo, os demais posts vão aparecendo pouco a pouco. Isso é uma forma de navegação pouco utilizada na web, mas muito útil em alguns casos.
Além da vantagem de não precisar carregar mais itens que o necessário, o usuário também não perde de vista os posts que já estavam carregados quando os novos são exibidos. Este é um problema que acontece naquele conhecido modelo de paginação com os links das páginas e os de próxima página e página anterior.
O objetivo é carregar somente o número de mensagens que preencha o espaço na tela do usuário e, caso o usuário baixe até o final a barra de rolagem, o sistema carregue novas mensagens, mantendo na tela as anteriores.Â
No exemplo deste artigo, você pode ver na prática como funciona este modelo de paginação. Se preferir, baixe os códigos fontes para fazer seus estudos e alterações.
Como funciona?Â
Não vou me aprofundar explicando a utilização da classe Ajax utilizada no projeto, deixo isso para um futuro post. No momento, veremos as funções essenciais do exemplo, e a primeira delas é a função addLine(), que insere (via DOM) uma nova linha no div dos itens.
A função recebe como parâmetro um objeto contendo os atributos id e text e monta a linha que será inserida logo em seguida. Note que a função também controla a variável global id que será passada como parâmetro em todas as requisições dos notos itens. No nosso caso, apenas para que cada mensagem tenha um número maior que a anterior.
As funções paginationComplete() e pagination() são as responsáveis por fazer as requisições das próximas mensagens.
A função onScroll() verifica se a barra de rolagem está no rodapé da página. Se estiver, executa a função pagination(), que como vimos, fará a requisição das novas mensagens.
A função init() é quem chama pela primeira vez a função pagination(). Ela também atribui aos eventos window.onscroll e window.onresize, para que no sistema faça requisições sempre que ainda tiver espaço para novas mensagens.
Onde utilizar o método?
Utilizei este método (e estes mesmos códigos) em um sistema de monitoramento de mensagens, onde o usuário abria a tela de via as últimas mensagens, e conforme ia baixando a tela as mensagens antigas eram carregadas (até que não houvessem mais mensagens antigas no banco). Outro sistema de refresh fazia as requisições das novas mensagens, que eram exibidas no topo. Com isso consegui um bom sistema de monitoramento em tempo real de mensagens, e que ao mesmo tempo era prático para visualizar mensagens antigas.
Você pode usar sua imaginação para utilizar estes códigos em seus projetos. Acho que é um bom exemplo de se usar em sistemas de mensagens, leitor de e-mails, agregador de feeds rss, e em qualquer lugar onde o método convencional de paginação não é a melhor opção.
Considerações finais
Testei o exemplo no Firefox e no IE 7, portanto, se você encontrar algum erro por favor me avise que eu corrijo.
Se tiver dúvidas ou quiser fazer algum comentário sobre o artigo e o exemplo, sinta-se à vontade para utilizar o formulário de comentários abaixo ou então acompanhar a discussão no fórum.
Divirta-se!
