Help us understand the problem. What is going on with this article?

【備忘録】【javascript】ページの一番下までスクロールしたかどうかを判定する方法

More than 1 year has passed since last update.

対象がwindowの場合

// 参考: https://ja.javascript.info/size-and-scroll-window
// ブラウザ間の差異をカバーする
// ページ全体の高さを取得する
const scrollHeight = Math.max(
  document.body.scrollHeight, document.documentElement.scrollHeight,
  document.body.offsetHeight, document.documentElement.offsetHeight,
  document.body.clientHeight, document.documentElement.clientHeight
);

// 一番下までスクロールした時の数値を取得(window.innerHeight分(画面表示領域分)はスクロールをしないため引く)
const pageMostBottom = scrollHeight - window.innerHeight;

window.addEventListener('scroll', () => {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

    // iosはバウンドするので、無難に `>=` にする
    if (scrollTop >= pageMostBottom) {
        console.log('一番下までスクロールしました');
    }
});

対象がelementだった場合

参考: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight

要素がスクロールの最後にある場合 true
そうでない場合に false

// ios系はバウンドするので <= としている
element.addEventListener('scroll', () => {
  element.scrollHeight  -  element.scrollTop <= element.clientHeight
});
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away