いま閲覧しているページの最下部（一番下）に来たとき（見えたとき）にイベントを発動させたいときの方法メモ。
【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 関数 に関してはコチラ↓
developer.mozilla.org次に、
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 』より大きい、もしくは同じ」という条件で最下部に到達したかを判定し、処理を実行させます。
