スクロールしてページの最下部で処理をする[scroll][jQuery]

2017年8月27日

画面をスクロールしていき、ページの最下部に到達したら任意の処理を行えるよう実装してみます。

 

スポンサーリンク

 

 

上記のデモ画面では、ページが最下部に到達すると<div id=”sample2″></div>の領域の背景が青になるように処理しています。もう一度上方向にスクロールさせると、元のオレンジ色に戻ります。

 

デモ画面

 

 

24行目
今回作成したコードでは、スクロールした距離とブラウザのウィンドウサイズを元にページが最下部かどうかを判定しています。よってユーザーがブラウザのウィンドウサイズを変更しても、そのアクションを拾えるようにresizeを設定しています。

 

26行目
$(document).height()はドキュメント全体の高さです。上記の例の場合は、id=”sample1″とid=”sample2″を合わせた1200pxがその高さとなります。

 

window.innerHeightはブラウザの画面(viewport)の高さで、ユーザーの環境によって変わってきます。

 

$(document).height() – window.innerHeight;の値は、ドキュメント全体の高さから画面の高さを引いた値です。つまり、この値はスクロールできる最大の値となります。

 

 

28行目
スクロールした値(scrollTop)と、スクロールできる最大の値とを比べています。スクロールした値が、スクロールできる最大の値となった時(つまりページの最下部)に、背景を青に変化させています。

 

 

関連ページ

スクロール[scroll][scrollTop][jQuery]

 

 

参照文献


 

 

Copyright © 2017 ウェブの葉 All Rights Reserved.  プライバシーポリシー