jQuery Mobile逆引きリファレンス
スクロール時に追加的にコンテンツを読み込むには？
スクロールの開始／終了のタイミングで発生するscrollstart／scrollstopイベントの基本的な使い方を説明。また、画面を縦方向にスクロールするためのsilentScrollメソッドについても紹介する。
jQuery Mobileとは？
jQuery Mobileは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前の通り、スマホ／タブレットに代表されるモバイル対応アプリを開発するための機能を提供します。jQuery Mobileの導入方法や使い方、jQuery Mobileが提供する主要機能については、「jQuery Mobile逆引きリファレンス： jQuery Mobileを利用するには？」を参照してください。
jQuery Mobileでは、スクロールの開始／終了を検知するために、以下のようなイベントが用意されています。
| イベント | 発生タイミング |
|---|---|
| scrollstart | スクロールを開始したとき |
| scrollstop | スクロールを終了したとき |
以下では、scrollstopイベントを利用して、スクロールによってコンテンツの末尾まで到達すると、追加のコンテンツを動的に取得し、ページに反映する例を示します。これによって、最初から全てのコンテンツをロードしなくて済むので、通信量の節減になります。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>jQuery Mobile</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js">
</script>
<script>
$(document).on('pagecreate', function(e, d) {
// 追加コンテンツを読み込み済みか（フラグ変数）
var read = false;
// 1スクロール終了時にページ末尾に到達していたら、追加コンテンツをロード
$(window).on('scrollstop', function(e) {
// 追加コンテンツを読み込み済みであれば、処理を終了
if (read) { return; }
// 2ページ末尾に到達しているかを判定
if ($(this).scrollTop() + $(this).height() > $(document).height() - 50) {
// 3「現在のページ.dat」を取得＆ページ末尾に追加
$.get($.mobile.path.parseLocation()['filename'] + '.dat')
.done(function(data){
$('#page_main').append(data);
// フラグをtrueに反転
read = true;
});
}
});
});
</script>
</head>
<body>
<div data-role="page" data-title="jQuery Mobile">
<div data-role="header">
<h1>jQuery Mobile</h1>
</div>
<div id="page_main" role="main" class="ui-content">
<p>ほげほげほげほげ</p>
<p>ほげほげほげほげ</p>
……中略……
<p>ほげほげほげほげ</p>
</div>
<div data-role="footer">
Copyright 1998-2014, YAMADA.Yoshihiro
</div>
</div>
</body>
</html>
|
|
<p>HogeHogeHogeHoge</p>
<p>HogeHogeHogeHoge</p>
……中略……
<p>HogeHogeHogeHoge</p>
|
下にスクロールすると……
ページ本体のスクロールを検知したいので、scrollstart／scrollstopイベントは、$(window)に対してひも付けます（1）。
ページ末尾に到達しているかどうかを判定しているのは2のコードです。$(this)は、この場合、イベント発生元である$(window)を表していますので、$(this).scrollTop()は現在のスクロール位置を、$(this).height()は現在の表示領域の高さを、それぞれ表します。つまり、これらを合算したものが、ページで現在表示している領域の下位置を意味します（次の図の左側で説明している部分）。そして、この値を仮に「a」とします。
一方、$(document).height()はドキュメント全体の高さを表しますので、「そこから50を引いたものが先ほど求めた値aよりも小さい」とは、現在の表示位置がページ末尾から50px上の部分まで到達している、ことを意味します。
50pxはいわゆる先読みのための“あそび”です。コンテンツの読み込みにはいくらかの時間がかかるため、ユーザーにとってはそこにもたつきを感じてしまいます。よって、末端に行き着く直前に読み込みを開始することで、スムーズなスクロールを実現しているのです。
あとは、現在のファイル名を基に追加のコンテンツをロードするだけです（3）。現在のページが「scroll.html」であれば、「scroll.html.dat」をロードします。現在のファイル名を取得するparseLocationメソッドについては、別稿「$.mobile.pathオブジェクトでパス／URLの情報を取得／操作するには？」を参照してください。
$.getメソッドで取得したコンテンツは、appendメソッドでページの末尾に追加します。また、同じコンテンツを重複して読み込まないよう、フラグ変数readを「true」に反転しておきます。以降、フラグ変数readが「true」の場合は、読み込みの処理をスキップします。
補足：JavaScriptコードからスクロールする
jQuery Mobileでは、画面を縦方向にスクロールするためのsilentScrollメソッドがあります。
［構文］silentScrollメソッド
$.mobile.silentScroll([yPos])
- yPos：スクロール先のY座標
|
$('#btn').click(function(e) {
$.mobile.silentScroll(0);
});
|
引数yPosが「0」であるとは、「ページの先頭に移動しなさい」という意味です。デフォルト値も「0」なので、サンプルのコードは単に「$.mobile.silentScroll();」としても同じ意味です。
なお、silentScrollメソッドはスクロールイベントを発生しません。つまり、scrollstart／scrollstopなどのイベントは、silentScrollメソッドによって発生しないということです。「silent」（無音の）という名前のゆえんです。
※以下では、本稿の前後を合わせて5回分（第35回～第39回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
37. data-defaults／data-enhanced属性でページの描画を高速化するには？
jQuery Mobileでパフォーマンスを改善する方法を解説。ウィジェットの動作パラメーターをデフォルト設定して解釈処理をスキップする方法と、文書ツリーの一部を手書きして自動生成をスキップする方法について紹介する。
38. 【現在、表示中】≫ スクロール時に追加的にコンテンツを読み込むには？
スクロールの開始／終了のタイミングで発生するscrollstart／scrollstopイベントの基本的な使い方を説明。また、画面を縦方向にスクロールするためのsilentScrollメソッドについても紹介する。
39. モバイル端末を縦横回転させたときにレイアウトを調整するには？
端末の回転を検知できるorientationchangeイベントを説明して、端末が縦置きの場合は縦並びに、横置きの場合は横並びに表示する方法を説明する。
