脱jQuery！ページの最下部までスクロールしたかを判定するjavaScript

こんにちは、ナカムラです。
今回はネイティブのjavaScriptでページ最下部に到達したかどうかを判定する処理を書いていこうと思います。
この処理はボタンを固定表示したページや、記事の終わりにメッセージを表示したいなど、ユーザーの操作に合わせて表示を変化させたい時に活用できます。

2021/6/16追記
別の方法を記事にしました。こちらのやり方が良いかと思います。
tech.arms-soft.co.jp

DEMO

See the Pen javascript_ページの最下部までスクロールしたかを判定する by Nakamura (@takayo-nakamura) on CodePen.

ページ最下部の位置を取得する

まずはページの最下部はどこなのかを取得する必要があります。
.document.innerBottomなどそのまま取得できるものがあれば良いのですが、そういったものはないので、javaScriptで取得できる値を使って計算します。

取得できる値

・bodyの高さ（コンテンツ全体の高さ）
・windowの高さ（ブラウザの高さ）

bodyの高さから、windowの高さを引くと、ページ最下部までスクロールしたかを判定するための位置になります。

コード：2〜4行目

実際のコードはこんな感じです。

const bodyHeight = document.body.clientHeight // bodyの高さを取得
const windowHeight = window.innerHeight // windowの高さを取得
const bottomPoint = bodyHeight - windowHeight // ページ最下部までスクロールしたかを判定するための位置を計算

変数bottomPointにページ最下部までスクロールしたかを判定するための値が入りました。

スクロール量の取得と判定

判定基準となる数値が用意できたので、あとはスクロール量がその位置まで達したかを判定します。

コード：6〜13行目

スクロールしたときのイベントになるので、.addEventListenerを使います。
スクロールした時に、スクロール量を取得し、先ほど用意した変数bottomPointと比較します。

window.addEventListener('scroll', () => {
  const currentPos = window.pageYOffset // スクロール量を取得
  if (bottomPoint <= currentPos) { // スクロール量が最下部の位置を過ぎたかどうか
    html.classList.add('is-scrollEnd') 
  } else {
    html.classList.remove('is-scrollEnd')
  }
})

あとは判定結果に応じて付けたい処理を加えていきます。
今回は最下部までスクロールしたらボタンを消したいので、htmlタグにクラス.is-scrollEndを付与し、表示・非表示をCSSで変化させています。

.button {
  
   // 省略
  
  .is-scrollEnd & {
    transform: scale(0);
  }
}

※javaScriptで表示／非表示を切り替えることも可能です。
表示を変化させたい要素が複数あった場合、javaScriptで制御するには、変化させたい要素を一つ一つ取得しないといけないので少し面倒です。
状態の判定までをjavascriptで行い、表示はCSSでと役割を分けると簡単だと思います。

最後に

今回はページ最下部の判定でしたが、別の位置の判定をしたい場合はbottomPointの値を変えてください。

おしらせ

来週はGWでお休みのため、次回の更新は5/12（水）になります。