画面をスクロールしていき、ページの最下部に到達したら任意の処理を行えるよう実装してみます。
スポンサーリンク
上記のデモ画面では、ページが最下部に到達すると<div id=”sample2″></div>の領域の背景が青になるように処理しています。もう一度上方向にスクロールさせると、元のオレンジ色に戻ります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ページの最下部で処理を行う</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <style> *{margin:0;} #sample1{height:600px; width:300px; background:green;} #sample2{height:600px; width:300px; background:orange;} </style> <head> <body> <div id="sample1"></div> <div id="sample2"></div> <script> $(function(){ $(window).on('load scroll resize', function(){ const scrollTop = $(window).scrollTop(); const scrollMax = $(document).height() - window.innerHeight; if(scrollTop >= scrollMax){ $('#sample2').css('background','blue'); }else{ $('#sample2').css('background','orange'); } }); }); </script> </body> </html> |
24行目
今回作成したコードでは、スクロールした距離とブラウザのウィンドウサイズを元にページが最下部かどうかを判定しています。よってユーザーがブラウザのウィンドウサイズを変更しても、そのアクションを拾えるようにresizeを設定しています。
26行目
$(document).height()はドキュメント全体の高さです。上記の例の場合は、id=”sample1″とid=”sample2″を合わせた1200pxがその高さとなります。
window.innerHeightはブラウザの画面（viewport）の高さで、ユーザーの環境によって変わってきます。
$(document).height() – window.innerHeight;の値は、ドキュメント全体の高さから画面の高さを引いた値です。つまり、この値はスクロールできる最大の値となります。
28行目
スクロールした値（scrollTop）と、スクロールできる最大の値とを比べています。スクロールした値が、スクロールできる最大の値となった時（つまりページの最下部）に、背景を青に変化させています。
関連ページ
スクロール[scroll][scrollTop][jQuery]
