無限スクロール(infinite scroll)を実現するいくつかの方法と、jScrollによる実装サンプル
Webページで一覧表示の画面などで、一番下までスクロールして表示したら、次の一覧を次々に読み込んで、際限なくスクロールさせるエフェクト、一般的には「無限スクロール」と呼ばれます。
最近使う機会が増えて来たので、簡単にサンプルコードを動かせるようにメモしておきます。
どの「無限スクロール」ライブラリを使うか
調べたところ、使いやすそうなライブラリは２つありました。
「Infinite Scroll」と「jScroll」です。
それぞれ、特徴を記載したいと思います。
Infinite Scroll
使いやすそうで、デザインの拡張性も高い。
ただ、ライセンス体系が２つあり、商用で使うには、お金がかかるみたい。
個人で使うにはいいと思いますが、お仕事やプロジェクトで利用するのはやめておいたほうがいいと思った。
jScroll
jQueryで動く、無限スクロールとオートページャーのライブラリ。
MIT とGPL2のダブルライセンス。こちらはフリーで使えると思う。
ということで、私が使っているのは「jScroll」です。
「jScroll」を利用した無限スクロールのサンプルと使い方
jScrollを使うには、jQuery1.8以上が必要ですので、ダウンロードしておきましょう。
このサンプルでは、Ver3.3.1を利用しました。
また、jScrollもインストールします。いくつか方法がありますが、一般的にはファイルをダウンロードしてくるほうか多いかな？
下記のgithubのページの右下の緑のボタン「Clone or download」を押して、zipファイルとしてダウンロードできます。
https://github.com/pklauzinski/jscroll
解凍したファイルで、最低限「jquery.jscroll.min.js」と「jscroll.css」が必要です。
さて、用意はこの「jQuery」と「jScroll」だけなので、準備できたら、以下のソースを記載します。
どのようなサンプルかというと、もともとの画面が「org1.html」で、このページを開いて、「４：４」という文字の下のところまでスクロールすると、次の画面「org2.html」が読み込まれます。この「org2.html」の中で「org1.html」を読み込むように設定してありますので、「スクロールを続ければ、永遠に交互に読み込まれ続ける」サンプルです。
親画面のソース
|
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 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<head> <title>Parent Page to Locad infinite scroll</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <script src="http://localhost/media/jquery-3.3.1.min.js"></script> <script src="http://localhost/media/jscroll/jquery.jscroll.min.js"></script> <link rel="stylesheet" href="http://localhost/media/jscroll/jscroll.css" /> <h1>Parent Page to Locad infinite scroll</h1> <script> $(function() { $('#infinite_content').jscroll({ debug:true, autoTrigger: true, autoTriggerUntil: 30, loadingHtml: '<img class="center-block" src="./img/Loading_icon.gif" alt="Loading..." />', padding: 0, nextSelector: 'a.jscroll-next:last', contentSelector: '.jscroll-next', //callback: function() { // $('ul.pagination').remove(); //} }); }); </script> <div id="infinite_content"> <div class="jscroll-next"> １：１<br /><br /><br /><br /><br /> </div> <div class="jscroll-next"> ２：２<br /><br /><br /><br /><br /> </div> <div class="jscroll-next"> ３：３<br /><br /><br /><br /><br /> </div> <div class="jscroll-next"> ４：４<br /><br /><br /><br /><br /> </div> <a class="jscroll-next" href='./org2.html'>last</a> </div> </body> |
子画面のソース
|
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 |
<head> <title>LoadedPage to infinite</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <h1>LoadedPage to infinite</h1> <div id="infinite_content"> <div class="jscroll-next"> ５：５<br /><br /><br /><br /><br /> </div> <div class="jscroll-next"> ６：６<br /><br /><br /><br /><br /> </div> <div class="jscroll-next"> ７：７<br /><br /><br /><br /><br /> </div> <div class="jscroll-next"> ８：８<br /><br /><br /><br /><br /> </div> <a class="jscroll-next" href='./org1.html'>last</a> </div> </body> |
ソースの内容を解説
いくつかポイントとなるところを解説しておきます。
キモはずばり以下の初期化の部分ですね。
|
1 2 3 4 5 6 7 8 9 10 |
$(function() { $(<span style="font-weight: bold;">'#infinite_content'</span>).jscroll({ debug:true, autoTrigger: true, autoTriggerUntil: 30, padding: 0, <span style="font-weight: bold;">nextSelector: 'a.jscroll-next:last',</span> <span style="font-weight: bold;">contentSelector: '.jscroll-next',</span> }); }); |
「id=”infinite_content”」のdivで囲まれた領域を無限にスクロールする初期化のコードになります。
「nextSelector」が「a.jscroll-next:last」となっているのは、aタグの中のclass「jscroll-next」の最後の要素までスクロールしたら、次の画面をロードするという指定です。
次の画面をロードしたときに、「contentSelector」で指定しているclass「jscroll-next」の部分だけが繰り返しの対象になります。
