Crie um ponto final de rolagem JavaScript

Existem tantos plugins disponíveis online para implementar o carregamento lento na página da web. Mas eles apenas acionam uma função de retorno de chamada depois de rolar uma certa quantidade de uma página. Que tal chamarmos nossa função de callback quando a barra de rolagem chegar ao final da página. Pode ser que esses plugins estejam disponíveis online, mas eu os desconheço e sempre gosto de criar algo do zero. Então, vamos fazer nosso próprio ponto final de rolagem.

1. Primeiramente, crie um arquivo HTML (index.html) e um arquivo js (script.js).

2. Agora cole o CSS fornecido na tag 'head' do arquivo HTML e vincule o arquivo js ao HTML.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scroll ending point with JavaScript</title>

    <style>
      *{
        margin: 0;
        padding: 0;
      }

      body{
        height: 200vh;
      }
    </style>
  </head>

  <body>

    <script src="script.js"></script>
  </body>
</html>

const selector = el=>document.querySelector(el);
const body = selector('body');

4. Agora é hora de criar um evento de rolagem. O código do evento scroll é dado abaixo-

window.addEventListener('scroll', ()=>{
  const rect = body.getBoundingClientRect();
  const scrollLimitLeft = rect.bottom + rect.y;
  if(scrollLimitLeft===0)console.log('End of the scroll');
});

5. Conseguimos o que queríamos e nosso código ainda está funcionando sem problemas. Mas há um pequeno bug escondido em nosso código. Nosso código deixará de funcionar se removermos o código de redefinição do CSS ( *{margin: 0; padding: 0;} ) do arquivo HTML. Se você vir o valor da variável " scrollLimitLeft" agora rolando na parte inferior da página, o valor será -16 (o valor pode variar em diferentes navegadores). Pode ser que você esteja chateado como eu pensando que nosso código js funcionará com base na presença de uma linha de código CSS. Mas não se preocupe, continue lendo e você terá a solução.

6. Primeiro precisamos saber por que isso está acontecendo. Na verdade, o HTML tem uma margem padrão em sua tag “body” e cria algum espaço extra para rolar. Como resultado, obtemos um resultado negativo em vez de '0' na parte inferior da página. Portanto, precisamos subtrair a margem extra de “ scrollLimitLeft ” para que nosso código volte a funcionar. Então, vamos descobrir a margem extra.

7. Escreva o código fornecido após os códigos da seção 3

const extraMargin = selector('html').scrollHeight - body.scrollHeight;

const selector = el=>document.querySelector(el);
const body = selector('body');
const extraMargin = selector('html').scrollHeight - body.scrollHeight;

const scrollLimitLeft = rect.bottom + rect.y + extraMargin;

window.addEventListener('scroll', ()=>{
  const rect = body.getBoundingClientRect();
  const scrollLimitLeft = rect.bottom + rect.y + extraMargin;

  if(scrollLimitLeft===0)console.log('End of the scroll');
});

const selector = el=>document.querySelector(el);
const body = selector('body');
const extraMargin = selector('html').scrollHeight - body.scrollHeight;

window.addEventListener('scroll', ()=>{
  const rect = body.getBoundingClientRect();
  const scrollLimitLeft = rect.bottom + rect.y + extraMargin;

  if(scrollLimitLeft===0)console.log('End of the scroll');
});

Então, o que você acha deste pequeno projeto? Se você gostou, dê uma palmada e se encontrar algum erro no projeto ou tiver alguma sugestão sobre ele, deixe-me saber na seção de comentários.