利用規約など最後までスクロールしなければ次へ進めない機能を実装する。 scrollTop, scrollHeight を使用して検出できる。 scrollTop : スクロール可能な領域の上端から現在表示している領域の上端までの距離 scrollHeight : スクロール可能な領域全体の高さ それに jQuery などで取得した表示領域の高さ height を組み合わせる。 scrollTop はスクロールとともに増加する。 一番下までスクロールされると scrollTop と height の合計値が scrollHeight に一致する。 計算は要素がスクロールされている間、発生し続ける scroll イベントを使う。 $('element').on('scroll', function() { console.log('スクロールされています'); }); 以下が動作するサンプル。
![JavaScript で最後までスクロールしたかを調べる](https://cdn-ak-scissors.b.st-hatena.com/image/square/43852ef8e2d8819fd78f520aa3eab46ba87daf00/height=288;version=1;width=512/https%3A%2F%2Fblogger.googleusercontent.com%2Fimg%2Fb%2FR29vZ2xl%2FAVvXsEhxxLJIhtecS6Pvp0Y-XcCSUk_f9UvOdHBdG4G42pviJu5h5TOskWNCXD6BxZ72s-F4mCHvI_sTSG1QoyTJE0cdMwvEVijMZYvkjUBT5BnKKJRiU6kzp7BvKM4JKFnzZftnJujEpN4oDVmA%2Fw1200-h630-p-k-no-nu%2Fscroll.png)