iPhoneやAndroidでjQueryを使ってブラウザの一番下まできたら自動的に読み込む

iPhone や Android で Twitter のタイムラインのようにブラウザで一番下まできたら自動的に “続き” や “次の○件” を読み込みたいことがあります。
今回はこのやり方を紹介します。今回はスマホだけなので WebKit ベースのブラウザ（Safari, Chromeなど）にしか対応しません。

先人たちのアプローチを試す

1. jQuery.bottom プラグイン

jQuery のプラグインでは小粋空間さんで紹介されている jQuery.bottom プラグイン が有名なようです。

• TwitterやFacebookのように一番下までスクロールしたら自動的にコンテンツを表示する「jQuery.Bottomプラグイン」 – 小粋空間

このプラグインでは、jQuery オブジェクトに bottom 関数が追加されるので、これに関数を設定すると、ブラウザで最下部まできたときに bottom イベントを発生させることができます。

ただ、パソコンのブラウザではうまく動作するもののなぜか iPhone ではうまく動作しませんでした。

また、ソースコードを見てみましたが、したいことの割にはコードが長いので、今回の目的だけであれば、導入する必要はないと思いました。js ファイル読み込みも減りますし。

2. scroll イベントで直接判断する

下記のページでは window のスクロールイベントで直接判断しています。

• ページスクロールして最下部まで行ったら次のページを読み込む方法 –  打ち聞かせ

しかし、iPhone というか webkitでは clientHeight が取得できず（null）、うまく動きませんでした。

window の scroll イベントで判断して処理を開始する

ということで scroll イベントで判断する手法を元に、少し改良しました。

ごく簡単なコードに仕上がってると思いますが、簡単に流れを説明しておきます。

1. まず、$(window).scrollTop() + window.innerHeight で現在のスクロール位置での画面下の座標を求めます。
2. $(document).height() は現在の HTML の全高を返すので、さきほど求めた位置と比較します。ただし、完全一致にしてしまうと、必ず一番下までいかなくてはいけないので、 -50 のところである程度の余裕をもたせています。これはサイトのデザインなどによって適宜調整してください。
3. if ($(this).data(‘loading’)) return; で loading フラグが立っていたら、処理を中心します。
4. 実行に入る前に loading フラグを true にします。
5. ここまできたら実際に読み込む処理をします。
6. 処理が終わったら loading フラグを false にします。処理が非同期の場合は、非同期メソッドの中でフラグを倒します。

ソースコード

実行には jQuery が必要です。$(document).ready() 内に書いてやればよいと思います。

ブラウザの高さの取得には下記のページで紹介されていた window.innerHeight を利用しました。Chrome や iPhone の Safari で動作を確認しています。

• iPhoneでwindowの高さを取得 – JavaScriptメモ

また、scroll イベントは何度も発生するので、ロード中にさらに次のまで読み込まれたりしてエンドレスになってしまうことがあります。このため、ロード中は読み込まないよう、loading フラグを立てるようにしています。

最後までお読みいただきありがとうございました m(_ _)m