スクロール位置の取得方法について

Question

###実現したいこと
ページ最下部までスクロールしたときにアラートを出したいです。

<style>
main{
  height: 100vh;
}
div{
  height: 10000px;
}
</style>

<main>
  <div><p>最下部までスクロールしたらアラート</p></div>
</main>

###試したこと
調べた結果、最下部を取得し、画面のスクロール位置を取得すればできるかのように思い、書いてみたのがこのコードです。コメントしてある部分に間違いはないように思うのですが、なぜアラートがでないのでしょうか？

var main = $('main').innerHeight(), // ページ全体の高さ
    div = $('div').innerHeight(), // エリアの高さ
    bottom = div-main; // ページ最下部の位置

if ( $(window).scrollTop() >= bottom ){
  alert('ページ最下部まできました');
}

Answer 1

質問者様のJavaScriptですと、jsを読み込んだ時に1回だけ発生するだけなので全く意味がありません。
なのでスクロールイベントを使い、常にスクロール位置を取得し、一番下までスクロールしたらアラートというように書かなければなりません。
一番下までスクロールしたという判定はDocumentの高さからWindowの高さを引いた高さまでスクロールしたときで可能です。

$(window).on("scroll", function () {
  const doc_height = $(document).innerHeight();
  const win_height = $(window).innerHeight();
  const bottom = doc_height - win_height;
  if (bottom <= $(window).scrollTop()) {
    alert("hogehoge");
  }
});

Comments

[gonsy]

助かりました。基本的なことでしたね。どうもありがとうございます。