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

対象がwindowの場合

.javascript

// 参考: 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

.javascript

// ios系はバウンドするので <= としている
element.addEventListener('scroll', () => {
  element.scrollHeight  -  element.scrollTop <= element.clientHeight
});