批評スクロールしてページの最下部で処理をする[scroll][jQuery]2017年8月27日JavaScript画面をスクロールしていき、ページの最下部に到達したら任意の処理を行えるよう実装してみます。id=”sample2′′></div>の領域の背景が青になるように処理しています。一度上方向にスクロールさせると、元のオレンジ色に戻ります。今回作成したコードでは、スクロールした距離とブラウザのウィンドウサイズを元にページが最下部かどうかを判定しています。よってユーザーがブラウザのウィンドウサイズを変更しても、そのアクションを拾えるようにresizeを設定しています。26行目$(document).height()はドキュメント全体の高さです。上記の例の場合は、id=”sample1′′とid=”sample2′′を合わせた1200pxがその高さとなります。window.innerHeightはブラウザの画面(viewport)の高さで、ユーザーの環境によって変わってきます。window.innerHeight;の値は、ドキュメント全体の高さから画面の高さを引いた値です。この値はスクロールできる最大の値となります。28行目スクロールした値(scrollTop)と、スクロールできる最大の値とを比べています。スクロールした値が、スクロールできる最大の値となった時(つまりページの最下部)に、背景を青に変化させています。