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

利用規約など最後までスクロールしなければ次へ進めない機能を実装する。 scrollTop, scrollHeight を使用して検出できる。 scrollTop : スクロール可能な領域の上端から現在表示している領域の上端までの距離 scrollHeight : スクロール可能な領域全体の高さ それに jQuery などで取得した表示領域の高さ height を組み合わせる。 scrollTop はスクロールとともに増加する。 一番下までスクロールされると scrollTop と height の合計値が scrollHeight に一致する。 計算は要素がスクロールされている間、発生し続ける scroll イベントを使う。 $('element').on('scroll', function() { console.log('スクロールされています'); }); 以下が動作するサンプル。

[seapig_dolphin]

scrollTop : スクロール可能な領域の上端から現在表示している領域の上端までの距離 scrollHeight : スクロール可能な領域全体の高さ

[skomma]

絵がついてて分かりやすい！