jQuery Scroll: Como saber se o usuário rolou a página até o fim

Quando usar esse código?

Detectar que o usuário rolou a página até o fim pode ser útil para diferentes finalidades. Uma delas é a implementação do "scroll infinito", uma técnica que consiste de carregar novos conteúdos para o usuário quando ele chegar ao final da página. Isso pode fazer com que o usuário permaneça no site consumindo mais conteúdo sem precisar recarregar a página.

Além disso você pode usar o código desse exemplo para exibir notificações para o usuário, informar que ele concluiu a leitura, exibir sugestões, etc.

Exemplo

Para realizar o cálculo e saber quando o usuário chegou ao final do conteúdo precisamos conhecer alguns valores que, durante a rolagem da página podem ser fixos ou variáveis. A sequência de imagens abaixo ilustra esses valores:

#PraCegoVer - Transcrição dos Slides

• Altura da viewport (área visível no browser). Esse valor é fixo de acordo com as dimensões da janela.
• Altura do conteúdo, que pode ser maior que a área visível da janela. Assim, uma parte do conteúdo não será visualizada inicialmente, apenas quando o usuário rolar a página. Esse valor é fixo, pois o conteúdo não varia.
• Distância do conteúdo ao topo: normalmente haverá outros elementos antes do conteúdo principal da página, como margens, barra de navegação etc. Essa distância do conteúdo até o topo da página deve ser considerada ao calcular o scroll.
• Diferença entre o conteúdo e a viewport é a área que não é visualizada de início, ou seja, a parte do conteúdo que “sobra” para baixo.

Conhecendo esses valores, podemos calcular a posição do scroll para saber se o usuário rolou até o fim da página. Para isso, definimos algumas variáveis e tratamos o evento onscroll da janela, da seguinte forma:

 $(document).ready(function() {
   var alturaViewport  = $(window).height();
   var alturaElemento  = $("#posts").height();
   var distanciaTopo   = $("#posts").offset().top;
   var diferenca       = alturaElemento - alturaViewport;
   var chegou          = false;

   $(window).scroll(function() {

       var posicaoScroll   = $(window).scrollTop();

       if(!chegou){
           if (posicaoScroll >= (distanciaTopo + diferenca)) {
               alert('Barra de Rolagem chegou ao fim.');
               chegou = true;
           }
       }
   });
});
  

Linha 2: Variável responsável por armazenar a altura da viewport;

Linha 3: Variável que armazena a altura do conteúdo, que nesse caso é a section com id posts;

Linha 4: Variável que armazena a distância do elemento principal até o topo da página;

Linha 5: Aqui temos a diferença entre a altura do conteúdo e a viewport. Armazenamos em uma variável para simplificar a escrita do cálculo posteriormente;

Linha 6: Essa variável define se o usuário já chegou ao fim da página, de forma a não disparar a verificação novamente;

Linha 8: Aqui estamos tratando o evento de scroll da página. Assim, sempre que o usuário rolar a página o bloco de código entre as linhas 9 e 17 será executado

Linha 10: Variável que recebe a posição do scroll conforme a sua movimentação, ou seja, o quanto o usuário já movimentou a barra de rolagem;

Linha 12: Verificamos se o usuário já rolou até o fim. Só fazemos o cálculo da verificação caso ele ainda não tenha rolado até o final da página;

Linha 13: Aqui temos o cálculo principal do nosso cálculo, que consiste de verificar se a distância que o usuário já movimentou a barra de rolagem é maior ou igual à área que não estava visível inicialmente. Ou seja, se todo o conteúdo já entrou na área visível da tela, então o usuário chegou ao fim.

Linha 14: Exibimos um alert para indicar que chegamos ao ponto desejado. Aqui poderíamos efetuar outros procedimentos, como exibir notificações ou carregar conteúdo adicional;

Linha 15: Definimos a variável chegou como true para que a verificação não seja feita novamente.

Depurando o código

Para que possamos acompanhar a execução do código e entender como ele funciona, podemos imprimir no console do browser o estado das variáveis a cada vez que o usuário movimenta a barra de rolagem:

  console.log("("+posicaoScroll +" >>= "+ "
   ("+distanciaTopo+ " + ("+ alturaElemento + " - " + alturaViewport + ")))");  

Dessa forma, à medida que movimentamos a barra de rolagem poderemos ver no console o valor de cada variável.