【JavaScript】ページの最下部に来たときにイベントを起こす

いま閲覧しているページの最下部(一番下)に来たとき(見えたとき)にイベントを発動させたいときの方法メモ。

【JavaScript】ページの最下部に来たときにイベントを起こす方法

ページの最下部に来たときに

  • 固定ヘッダーを上に上げて隠したい
  • トップを戻るボタンを出現させたい

ってケース、よくありますよね。

そんなときに使ってるコードを備忘録としてメモ的に書き残します↓

const allHeight = Math.max(
  document.body.scrollHeight, document.documentElement.scrollHeight,
  document.body.offsetHeight, document.documentElement.offsetHeight,
  document.body.clientHeight, document.documentElement.clientHeight
);
const mostBottom = allHeight - window.innerHeight;
window.addEventListener('scroll', ()=> {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    if (scrollTop >= mostBottom) {
        // 最下部に到達したときに実行する処理
    }
});

解説

まず、

const allHeight = Math.max(
  document.body.scrollHeight, document.documentElement.scrollHeight,
  document.body.offsetHeight, document.documentElement.offsetHeight,
  document.body.clientHeight, document.documentElement.clientHeight
);

↑で Math.max 関数の引数に必要な各ウィンドウサイズを取得、それらを定数 allHeight に代入し、ブラウザ間の差異をカバーする&ページ全体の高さを取得します。各ウィンドウサイズの取得方法はコチラをご参照ください↓

Math.max 関数 に関してはコチラ↓

次に、

const mostBottom = allHeight - window.innerHeight;

↑で先程の定数 allHeight から window.innerHeight(スクロールバーを含むブラウザ内の表示域) の数値を引き、定数 mostBottom に代入します。これで、一番下までスクロールしたときの数値を取得(window.innerHeight分(画面表示領域分)はスクロールをしないため引きます)できます。

そして、

window.addEventListener('scroll', () => {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    if (scrollTop >= mostBottom) {
        // 最下部に到達したときに実行する処理
    }
});

window オブジェクトに scroll イベントを設定し、スクロールされたらファンクションを発動。

ファンクションの中で window.pageYOffset or document.documentElement.scrollTop のどちらかで垂直方向のスクロール量を取得して定数 scrollTop に代入し、if 文 の「スクロール量が『画面表示領域を引いた mostBottom 』より大きい、もしくは同じ」という条件で最下部に到達したかを判定し、処理を実行させます。

JavaScript 初心者にはコチラが分かりやすかったです▼