Crear un punto final de desplazamiento de JavaScript

Hay tantos complementos disponibles en línea para implementar la carga diferida en la página web. Pero solo activan una función de devolución de llamada después de desplazarse una cierta cantidad de una página. ¿Qué tal si podemos llamar a nuestra función de devolución de llamada cuando la barra de desplazamiento llegue al final de la página? Es posible que dichos complementos estén disponibles en línea, pero no los conozco y siempre me gusta crear algo desde cero. Así que hagamos nuestro propio punto final de desplazamiento.

1. En primer lugar, cree un archivo HTML (index.html) y js (script.js).

2. Ahora pegue el CSS dado en la etiqueta 'head' del archivo HTML y vincule el archivo js con 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. Ahora es el momento de crear un evento de desplazamiento. El código del evento de desplazamiento se da a continuación:

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

5. Hemos logrado lo que queríamos y nuestro código aún funciona sin problemas. Pero hay un pequeño error escondido en nuestro código. Nuestro código dejará de funcionar si eliminamos el código de reinicio de CSS ( *{margin: 0; padding: 0;} ) del archivo HTML. Si ve el valor de la variable " scrollLimitLeft " ahora desplazándose en la parte inferior de la página, el valor será -16 (el valor puede variar en diferentes navegadores). Puede estar molesto como yo pensando que nuestro código js funcionará sobre la base de la presencia de una línea de código CSS. Pero no te preocupes, sigue leyendo y encontrarás la solución.

6. Primero necesitamos saber por qué sucede esto. En realidad, HTML tiene un margen predeterminado en su etiqueta de "cuerpo" y crea un espacio adicional para desplazarse. Como resultado, obtenemos un resultado negativo en lugar de '0' en la parte inferior de la página. Entonces, debemos restar el margen adicional de " scrollLimitLeft " para que nuestro código vuelva a funcionar. Entonces, averigüemos el margen adicional.

7. Escriba el código dado después de los códigos de la sección 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');
});

Entonces, ¿qué piensas sobre este pequeño proyecto? Si te gustó, dale un aplauso y si encuentras algún error en el proyecto o tienes alguna sugerencia al respecto, házmelo saber en la sección de comentarios.