Paginação automática com jQuery

Paginação automática com jQuery
5.0 3

Qualquer um que utiliza o twitter ou que pelo menos já tenha acessado o twitter de alguém, já deve ter notado que automagicamente antes de você chegar ao fim da lista de tweets a paginação é feita, adicionando mais registro ao final. Na realidade o facebook também utiliza isto, mas citei o twitter por ter cido o precursor, se você acabou de acordar de um coma agora, não deve saber, mas no passado o twitter tinha um botão para adicionar mais registros (e o facebook também tinha).

De qualquer sorte, isto pode parecer algo complexo de ser executado, contudo com jQuery isto não é verdade, abaixo um exemplo prático de como disparar uma função quando chegar ao final da página:

<script type="text/javascript" charset="utf-8">
		  $(window).scroll(function () { 
            if(($(window).scrollTop() + $(window).height()) > ($('body').height()) ){
                alert('Bingo');
            }
		});
		</script>

Explicando mais detalhadamente, isto vai nos retornar a posição da barra de rolagem atualmente, assim saberemos em que posição da página estamos:
($(window).scrollTop() + $(window).height())

Abaixo temos a parte que nos diz a altura total da página:
$('body').height()

Veja que no exemplo que passei o alert só será disparado quando a barra de rolagem bater no rodapé da página, caso queira que a ação ocorra antes, basta subtrair algum valor da parte que nos diz a altura total da página, por exemplo:
<script type="text/javascript" charset="utf-8">
		  $(window).scroll(function () { 
            if(($(window).scrollTop() + $(window).height()) > ($('body').height() - 500) ){
                alert('Bingo');
            }
		});
		</script>

Neste exemplo o alert será disparado 500 pixels antes do fim da página, este caso é exatamente o que ocorre no facebook e no twitter, já que neles não é necessário chegar ao fim da página para disparar a paginação. Só é necessário ressaltar que no caso da paginação antes de bater no fim da barra de rolagem é conveniente fazer um controle, caso contrário o disparo do evento pode entrar em um looping.

É isso ai, até a próxima!

Comentários (3)

  • Matheus

    Dirlei, nesse caso vc pode tratar isso colocando um botão no fim da pagina, pra caso a paginação não funcionei ou esteja em um navegador q não de suporte o usuario clica e carrega o restante do conteúdo. Obg artigo, mi deu uma luz aqui.

    24 de Novembro de 2014 às 00:32
  • Dirlei

    Esse exemplo não funciona no IE, o evento dispara ao mover o scroll, independente do tamanho da janela...

    18 de Maio de 2012 às 20:49
    • Edgar Serra

      Dirlei, na realidade o problema é no IE7, no 8 e 9 funciona ok.

      19 de Maio de 2012 às 18:02

Comente =)

Atenção: Todos os comentários são moderados, por isto não perca seu tempo postando bobagens ou spam.