Jump to content
Fórum Script Brasil
  • 0

Carregar página quando barra de rolagem chegar ao fim


dedas
 Share

Question

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

Link to comment
Share on other sites

1 answer to this question

Recommended Posts

  • 0

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>

Edited by Arash
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share



  • Forum Statistics

    • Total Topics
      150.9k
    • Total Posts
      648.8k
×
×
  • Create New...