Créer un point de fin de défilement JavaScript

Il existe de nombreux plugins disponibles en ligne pour implémenter le chargement paresseux dans une page Web. Mais ils ne déclenchent une fonction de rappel qu'après avoir fait défiler une certaine quantité d'une page. Que diriez-vous que nous pouvons appeler notre fonction de rappel lorsque la barre de défilement atteint à la fin de la page. Peut-être que de tels plugins sont disponibles en ligne mais je leur suis inconnu et j'aime toujours créer quelque chose à partir de zéro. Créons donc notre propre point de fin de défilement.

1. Tout d'abord, créez un fichier HTML (index.html) et un fichier js (script.js).

2. Collez maintenant le CSS donné dans la balise 'head' du fichier HTML et liez le fichier js avec 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. Il est maintenant temps de créer un événement de défilement. Le code de l'événement de défilement est donné ci-dessous-

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

5. Nous avons réalisé ce que nous voulions et notre code fonctionne toujours correctement maintenant. Mais il y a un petit bogue caché dans notre code. Notre code cessera de fonctionner si nous supprimons le code de réinitialisation CSS ( *{margin: 0; padding: 0;} ) du fichier HTML. Si vous voyez la valeur de la variable « scrollLimitLeft » défiler maintenant en bas de la page, la valeur sera -16 (la valeur peut varier selon les navigateurs). Peut-être êtes-vous contrarié comme moi en pensant que notre code js fonctionnera sur la base de la présence d'une ligne de code CSS. Mais ne vous inquiétez pas, continuez à lire et vous obtiendrez la solution.

6. Nous devons d'abord savoir pourquoi cela se produit. En fait, HTML a une marge par défaut dans sa balise "body" et crée un espace supplémentaire pour faire défiler. En conséquence, nous obtenons un résultat négatif au lieu de '0' en bas de la page. Nous devons donc soustraire la marge supplémentaire de « scrollLimitLeft » pour remettre notre code au travail. Découvrons donc la marge supplémentaire.

7. Écrivez le code donné après les codes de la section 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');
});

Alors que pensez-vous de ce petit projet ? Si vous l'avez aimé, s'il vous plaît donnez-lui un coup et si vous trouvez une erreur dans le projet ou avez une suggestion à ce sujet, faites-le moi savoir dans la section des commentaires.