JavaScript で最後までスクロールしたかを調べる

利用規約など最後までスクロールしなければ次へ進めない機能を実装する。
scrollTop, scrollHeight を使用して検出できる。

scrollTop : スクロール可能な領域の上端から現在表示している領域の上端までの距離
scrollHeight : スクロール可能な領域全体の高さ
それに jQuery などで取得した表示領域の高さ height を組み合わせる。

scrollTop はスクロールとともに増加する。
一番下までスクロールされると scrollTop と height の合計値が scrollHeight に一致する。

計算は要素がスクロールされている間、発生し続ける scroll イベントを使う。

$('element').on('scroll', function() {
    console.log('スクロールされています');
});

以下が動作するサンプル。



scrollHeight は padding を含むが margin を含まないため、jQuery の outerHeight() で取得した高さを使用するのが良い。

スクロールの仕様についてはこちら
CSSOM View Model - W3C
http://www.w3.org/TR/cssom-view/#extensions-to-the-element-interface