Como determinar se uma barra de rolagem chegou ao final usando JavaScript

Escrito por kevin lee | Traduzido por josé fabián
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como determinar se uma barra de rolagem chegou ao final usando JavaScript
Use o JavaScript para acompanhar a barra de rolagem de um visitante do site (Thinkstock Images/Comstock/Getty Images)

Você não vê nenhum espetáculo visual quando a barra de rolagem atinge o final de um elemento em uma página da web, mas os programadores do JavaScript podem saber quando acontece isso, e provavelmente já viu uma aplicação na qual é necessário chegar ao final de um contrato de serviço antes de poder continuar. Os elementos HTML possuem várias propriedades que o seu aplicativo da web pode usar para detectar se uma barra de rolagem atingiu o final de um documento.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

Instruções

  1. 1

    Inicie um editor HTML e abra um documento.

  2. 2

    Adicione um controle "textarea" à seção "body" de um dos documentos HTML, como no seguinte exemplo:

    <textarea id="textarea1" rows="4" cols="55"> dados de exemplo dados de exemplo dados de exemplo dados de exemplo dados de exemplo dados de exemplo dados de exemplo dados de exemplo dados de exemplo dados de exemplo dados de exemplo dados de exemplo dados de exemplo dados de exemplo dados de exemplo dados de exemplo dados de exemplo dados de exemplo dados de exemplo dados de exemplo dados de exemplo </textarea>

    <input type="button" value="Check Scroll Position" onclick="return bottomReached('textarea1')" />

    Esse controle contém dados de exemplo suficientes para fazer com que apareça uma barra de rolagem na página. O botão faz uma chamada a uma função do JavaScript que determinará se o final da página foi atingido, passando-lhe o valor "id" do "textarea".

  3. 3

    Adicione a seguinte função do JavaScript à seção "head" do seu documento:

    <script> function bottomReached(objectID) {

    var object = document.getElementById(objectID); var bottomReached = false; var actualLocation = object.scrollTop + object.offsetHeight; var scrollHeight = object.scrollHeight;

    if (actualLocation > scrollHeight) bottomReached = true;

    alert("Bottom reached = " + bottomReached); } </script>

    Esta função buscará uma referência ao objeto "textarea" e, em seguida, obterá a localização atual da barra de rolagem por meio da soma dos valores "scrollTop" e "offsetHeight". Se o resultado for maior que o valor "scrollHeight" da "textarea", a variável "bottomReached" será verdadeira. Caso contrário, a variável será falsa.

  4. 4

    Salve o documento e visualize-o no seu navegador. O controle "textarea" aparecerá. Clique no botão "Check Scroll Position" (Verificar final do texto). A função será executada e aparecerá uma caixa com a mensagem "Bottom reached = false" (Final atingido = falso). Desça até o final do texto e pressione o botão novamente. A mensagem será agora "Bottom reached = true" (Final atingido = verdadeiro).

Dicas & Advertências

  • Para usar a função "bottomReached", passe o identificador do controle "textarea" que você quiser monitorar; a função não poderá fazer nada sem ele. Verifique o valor da variável "bottomReached" para determinar se a barra de rolagem chegou ao final.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível