Erstellen Sie einen JavaScript-Scroll-Endpunkt

Mar 19 2023

Es sind online so viele Plugins verfügbar, um Lazy Loading in Webseiten zu implementieren. Sie lösen jedoch erst dann eine Rückruffunktion aus, wenn eine bestimmte Länge einer Seite gescrollt wurde. Wie wäre es, wenn wir unsere Rückruffunktion aufrufen könnten, wenn die Bildlaufleiste das Ende der Seite erreicht? Möglicherweise sind solche Plugins online verfügbar, aber ich kenne sie nicht und erstelle immer gerne etwas von Grund auf. Erstellen wir also unseren eigenen Scroll-Endpunkt.

1. Erstellen Sie zunächst eine HTML-Datei (index.html) und eine JS-Datei (script.js).

2. Fügen Sie nun das angegebene CSS in das „head“-Tag der HTML-Datei ein und verknüpfen Sie die js-Datei mit 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. Jetzt ist es an der Zeit, ein Scroll-Event zu erstellen. Der Code des Scroll-Ereignisses ist unten angegeben:

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

5. Wir haben erreicht, was wir wollten, und unser Code läuft jetzt immer noch reibungslos. Aber in unserem Code versteckt sich ein kleiner Fehler. Unser Code funktioniert nicht mehr, wenn wir den CSS-Reset-Code ( *{margin: 0; padding: 0;} ) aus der HTML-Datei entfernen. Wenn Sie den Wert der Variable „ scrollLimitLeft“ jetzt unten auf der Seite scrollen sehen, ist der Wert -16 (der Wert kann in verschiedenen Browsern variieren). Vielleicht sind Sie genauso verärgert wie ich, wenn Sie denken, dass unser JS-Code auf der Grundlage des Vorhandenseins einer Zeile CSS-Code funktionieren wird. Aber keine Sorge, lesen Sie weiter und Sie werden die Lösung finden.

6. Zuerst müssen wir wissen, warum dies geschieht. Tatsächlich hat HTML einen Standardrand im „body“-Tag und schafft so zusätzlichen Platz zum Scrollen. Als Ergebnis erhalten wir unten auf der Seite ein negatives Ergebnis anstelle von „0“. Wir müssen also den zusätzlichen Spielraum von „ scrollLimitLeft “ abziehen, damit unser Code wieder funktioniert. Lassen Sie uns also die zusätzliche Marge herausfinden.

7. Schreiben Sie den angegebenen Code nach den Codes aus Abschnitt 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');
});

Was halten Sie von diesem kleinen Projekt? Wenn es Ihnen gefallen hat, klatschen Sie bitte. Wenn Sie einen Fehler im Projekt finden oder Vorschläge dazu haben, lassen Sie es mich im Kommentarbereich wissen.