efeito “rolagem infinita” em uma tabela HTML [fechado]

StackOverflow https://stackoverflow.com/questions/216588

Pergunta

Eu estou exibindo uma tabela de dados percorre uma página web. Esta tabela tem vários milhares de linhas dinâmicas, por isso é carregado a partir do servidor (via AJAX).

O usuário pode rolar para cima e para baixo, então o que eu preciso é detectar quando o usuário chega ao fim da barra de rolagem (isto é, a última linha na parte inferior da tabela), a fim para solicitar e mostrar mais dados.

Você pode encontrar este efeito no leitor de google, quando você rolar para a última mensagem em um determinado feed, google pedidos e programas de novas mensagens de forma transparente, mas eu não consigo descobrir como eles alcançá-lo.

A propósito, agora eu estou usando um YUI tabela de dados

Foi útil?

Solução

Obrigado por suas respostas. Esse é o meu código de trabalho final (inspirado por Greg e ajaxian.com ) , que utiliza algumas funções jQuery e trabalha com o YUI DataTable . 

$(".yui-dt-bd").scroll(load_more);

function load_more() {              
    if ($(this).scrollend()) {
        alert("SCROLL END REACHED !");
        // TODO load more data
    }
}

$.fn.scrollend = function() {
    return this[0].scrollHeight - this[0].scrollTop - this.height() <= 0;
}

Meu próximo passo é implementar a minha própria YUI Paginator para alcançar uma integração completa com componentes Yui:)

Outras dicas

Eu não estou familiarizado com o elemento específico que você está usando, mas, a fim para implementar isso em uma janela de tamanho completo, você pode fazer o seguinte: 

$wnd.onscroll = function() {
    if (($wnd.height - $wnd.scrollTop) < SOME_MARGIN) then doSomething();
};

Onde scrollTop é essencialmente "quantos pixels foram roladas". Eu assumo aplicar isso para a tabela que você está trabalhando com a vontade de fazer o trabalho.

Eu apenas pesquisei para isso e encontrei este artigo: Implementação Scroll dinâmico com Ajax , JavaScript e XML . Parece uma explicação completa.

Você pode vê-lo trabalhando aqui YUI somente. Em contraste com uma das soluções sugeridas acima, a barra de rolagem se move continuamente, a posição eo tamanho refletir o verdadeiro tamanho e posição da área visível, ele não carregar o próximo lote, quando a barra de rolagem atinge inferior. A barra de rolagem atinge inferior somente quando o último de todo os registros é na parte inferior da área de visualização. Claro, isso só funciona se você não sabe quantos registros existem.

Há uma propriedade notei durante a leitura através de propriedades DOM no Firebug hoje chamado scrollY (no Firebug na guia DOM ir para content> scrollY), que parece ser a quantidade de pixels da esquerda para a rolagem na janela. Tente ver se isso também é criado por elementos de rolagem. Então você pode usar a função de Yuval para carregar novos dados.

Ick. Não é um grande fã de rolagem infinita; ele quebra alguns dos pressupostos fundamentais que as pessoas fazem sobre como a Web funciona. Por favor, prometa que você só vai implementá-lo sob as seguintes condições:

1) você não está substituindo-a por um perfeitamente boa página que carrega tudo em um bom longa mesa e permite que o usuário usar Ctrl-F para procurar dentro da página para que o tempo Fringe vem.

2) você não planeja inserir um anúncio na parte inferior de cada pedaço de dados rolados.

3) você está fornecendo um fallback de trabalho (hey, há que agradável longa mesa novamente) para cegos e pessoas navegando na web com JavaScript desabilitado.

Se você estiver usando o YUI, tem um tableScrollEvent que é disparado quando o scrolls tabela. Junte isso com a função GenerateRequest do dataTable e você poderia implementar a rolagem infinita observando o tableScrollEvent e iniciar uma solicitação quando você chegar perto do final do seu conjunto de dados.

Os YUI doc não tem um exemplo específico para este caso, mas mostra que você como lidar com os dados retornado por GenerateRequest

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top