Como detectar se usuário chegou no fim da página com JavaScript

Neste artigo você aprenderá a como detectar se usuário chegou no fim da página, utilizando a linguagem JavaScript!

Fala programador(a), beleza? Bora aprender mais sobre JavaScript!

Introdução:

Identificar se o usuário chegou no fim da página é uma funcionalidade útil para carregar mais conteúdo dinamicamente, exibir elementos adicionais ou executar outras ações conforme o usuário interage com a página.

Neste artigo, mostraremos como detectar se usuário chegou no fim da página usando JavaScript.

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 116 aulas
• 4 projetos
• 9h 23min

Conhecer formação

O evento scroll

O primeiro passo para checar se o usuário chegou no fim da página é adicionar um evento de scroll ao objeto window.

O evento scroll é acionado sempre que o usuário rola a página, e podemos usar esse evento para verificar se o usuário chegou ao final da página.

Veja como adicionar um evento de scroll:

window.addEventListener('scroll', () => {
  // Verificar se o usuário chegou no fim da página
});

Verificando a posição de rolagem

Para detectar se o usuário chegou no fim da página, precisamos verificar a posição de rolagem atual em relação à altura total do documento.

Podemos fazer isso usando as propriedades scrollY, innerHeight e offsetHeight.

A seguir, apresentamos uma função que verifica se o usuário chegou ao final da página:

function userReachedBottom() {
  const scrollPosition = window.scrollY + window.innerHeight;
  const documentHeight = document.documentElement.offsetHeight;

  return scrollPosition >= documentHeight;
}

Combinando o evento scroll e a verificação de posição

Agora, vamos combinar o evento scroll e a função userReachedBottom() para detectar se o usuário chegou no fim da página.

Sempre que o usuário rolar a página, verificaremos se ele chegou ao final e, em caso afirmativo, executaremos uma ação específica:

window.addEventListener('scroll', () => {
  if (userReachedBottom()) {
    console.log('Usuário chegou no fim da página');
    // Execute a ação desejada aqui
  }
});

Ações comuns ao detectar o fim da página

Ao checar que o usuário chegou no fim da página, você pode executar várias ações, como:

• Carregar mais conteúdo: Carregue conteúdo adicional usando AJAX e insira-o no final da página para fornecer uma experiência de rolagem contínua.
• Exibir um botão “voltar ao topo”: Mostre um botão que permita ao usuário retornar rapidamente ao topo da página.
• Mostrar anúncios ou conteúdo promocional: Exiba anúncios ou promoções relevantes para o usuário quando ele chegar ao final da página.

Quer aprender mais sobre React? Confira o vídeo abaixo:

Conclusão

Neste artigo, exploramos como detectar se usuário chegou no fim da página usando JavaScript.

Mostramos como adicionar um evento de scroll e verificar a posição de rolagem para determinar se o usuário chegou ao final da página.

Essa técnica pode ser usada para melhorar a experiência do usuário, carregar conteúdo dinamicamente e oferecer recursos adicionais conforme necessário.

Está buscando em evoluir como Programador? Confira o nossos cursos clicando aqui.

Nosso principal objetivo é tornar você um dev profissional que é capaz de resolver problemas de alta dificuldade e criar projetos complexos, através de uma metodologia planejada nos mínimos detalhes, após formar muitos outros desenvolvedores.

Cursos com vários projetos, exercícios, material apoio, comunidade de alunos e muito mais!