ブログ/お知らせ Knowledge

jQueryで画面の一番下までスクロールしたかどうかを判定

コーディング

2017.03.04

Webデザイナーの平尾誠です。よくスクロールイベントを使うことがあるので備忘録。
jqueryを使って画面の一番下までスクロールしたかどうかを判定します。

ドキュメントの高さ – ウィンドウの高さ

単純に引いて値を求めて、着火するという仕組みです。

ドキュメントの高さというのは、htmlだったりdivタグだったりしてもいいわけです。
ただし、ページのスクロールと、要素のスクロールの判定を取得するのに若干記述が違うので要注意。

単純にページの一番下までスクロールしたかどうかを判定したいだけならこれ。

$(window).on('scroll', function(){
    var docHeight = $(document).innerHeight(), //ドキュメントの高さ
        windowHeight = $(window).innerHeight(), //ウィンドウの高さ
        pageBottom = docHeight - windowHeight; //ドキュメントの高さ - ウィンドウの高さ
    if(pageBottom <= $(window).scrollTop()) {
      //ウィンドウの一番下までスクロールした時に実行
    }
});

innerHeight()を使っている理由は、paddingも含めて計算してくれるからです。
height()はheightの領域のみです。また、outerHeight()の場合は、marginまで計算されます。
高さの取得は、状況に応じて自由に分ける必要があります。

画面の一番下が表示されるスクロール位置を計算

アラートが出ますよ。

特定の要素の一番下のイベントもとってみる

↑戻る

.outer{
    margin: 100px 60px 0;
    height: 600px;
    overflow-y: scroll;
    border: 1px solid #000;
}
.inner{
    height: 1200px;
}

$('.outer').on('scroll', function(){
    var innerHeight = $('.inner').innerHeight(), //内側の要素の高さ
        outerHeight = $('.outer').innerHeight(), //外側の要素の高さ
        outerBottom = innerHeight - outerHeight; //内側の要素の高さ - 外側の要素の高さ
    if(outerBottom <= $('.outer').scrollTop()) {
      //指定した要素の一番下までスクロールした時に実行
    }
});

サンプル用意しました。

ほなね