Carregar página quando barra de rolagem chegar ao fim

dedas · Agosto 10, 2012

Galera,

Dei uma procurada no fórum mas não consegui achar nada que tirasse completamente minha dúvida.Meu problema é o seguinte, tenho um sistema com muitos registros sendo exibidos em uma mesma página, e não estou afim de criar uma paginação, achei melhor colocar um efeito que funcionaria da seguinte maneira: serão exibidos 30 registros, e quando a pessoa chegasse ao final da página(onde não tivesse mais como rolar a barra de rolagem) carregaria automaticamente mais 30 registros e assim por diante.

Vi isso em um site mas não conseguir desvendar o mistério.Li em outro fórum que da pra fazer isso com o método offset() do jquery, mas não consegui entender como fazer D: Não precisar me enviar detalhadamente como fazer, só queria um caminho :T

Vlw :DD

Arash · Agosto 12, 2012

Então... eu pesquisei tambem e não achei nada explicando...

Aqui um exemplo bem explicado (eu acho).

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Como Funciona o SCROLL</title>
<style>
#ondeEstaOScroll {
    position:fixed;
    width:150px;
    right:0px;
}
.linha {
    color:gray;    
}
</style>
 <script>
function onScroll() {
    var scrollEsta, scrollMax, clientMax, per;
    
    //Retorna os pixels do documento actual foi rolado (vertical) a partir do canto superior esquerdo da janela.
    scrollEsta = document.documentElement.scrollTop || window.pageYOffset;
    
    //Retorna a altura visível do conteúdo em uma página (não incluindo as fronteiras, margens, ou barras de rolagem)
    scrollMax = document.documentElement.scrollHeight;
    
    //Retorna a altura total de um elemento (incluindo áreas escondidas com barras de rolagem)
    clientMax = document.documentElement.clientHeight || document.body.clientHeight;
    
    per = scrollEsta / (scrollMax - clientMax);
    if (per === 1 || clientMax === scrollMax) {
        alert("Fim Da Página");
    }
      document.getElementById("ondeEstaOScroll").value = scrollEsta;
}
window.onscroll = onScroll;
window.onload = function () {
    for (i = 0; i <= 100; i += 1) {
        document.getElementById("p").innerHTML += '<span class="linha">Linha     </span>' + i.toString()+'<br/>';
    }
}
</script>
</head>

<body>
<input type="text" id="ondeEstaOScroll">
<p id="p"></p>
</body>
 </html>

Editado Agosto 12, 2012 por Arash

Entrar

Carregar página quando barra de rolagem chegar ao fim

Pergunta

dedas

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

Arash

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades