JavaScript スクロール終了点を作成する

Webページに遅延読み込みを実装するためにオンラインで利用できるプラグインがたくさんあります。ただし、一定量のページをスクロールした後にのみコールバック関数がトリガーされます。スクロールバーがページの最後に到達したときにコールバック関数を呼び出すことができるようにしてはどうでしょうか。もしかしたら、そのようなプラグインはオンラインで入手できるかもしれませんが、私はそれらのことを知りませんし、常にゼロから何かを作成するのが好きです。それでは、独自のスクロール終了点を作成してみましょう。

1. まず、HTML (index.html) と js (script.js) ファイルを作成します。

2. 次に、指定された CSS を HTML ファイルの「head」タグに貼り付け、js ファイルを 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. 次に、スクロール イベントを作成します。スクロールイベントのコードは以下のとおりです。

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

5. 望んでいたものを達成し、コードは現在もスムーズに実行されています。しかし、コードには小さなバグが隠れています。HTML ファイルからCSS リセット コード ( *{margin: 0; padding: 0;} ) を削除すると、コードは機能しなくなります。ページの下部でスクロールしている「 scrollLimitLeft」変数の値が表示されている場合、その値は -16 になります (値はブラウザによって異なる場合があります)。もしかしたら、あなたも私と同じように、CSS コードの行が存在するだけで JS コードが機能すると考えて動揺しているかもしれません。しかし、心配しないでください。読み続ければ解決策が得られます。

6. まず、なぜこれが起こっているのかを知る必要があります。実際、HTML には「body」タグにデフォルトのマージンがあり、スクロールするための余分なスペースが作成されます。その結果、ページの下部に「0」ではなく負の結果が表示されます。したがって、コードを機能させるには、 「 scrollLimitLeft 」から余分なマージンを減算する必要があります。それでは、余分なマージンを調べてみましょう。

7. セクション 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');
});

それで、この小さなプロジェクトについてどう思いますか? 気に入っていただけた場合は、拍手をお願いします。プロジェクトに間違いを見つけたり、提案がある場合は、コメント欄でお知らせください。