[JS]ウェブページやWordPressのページを無限スクロールさせるスクリプト -Infinite Scroll

ウェブページをPinterestのように無限スクロールさせるjQueryのプラグイン、アンドWordPressのプラグインを紹介します。

Infinite Scroll

一番最初にリリースされたのはかなり前ですが、いつの間にか2.0にバージョンアップされていたのでご紹介。

• Infinite Scrollのデモ
• Infinite Scroll -jQueryのプラグイン
• Infinite Scroll -WordPressのプラグイン

Infinite Scrollのデモ

デモはテキストだけのページです。

デモページ

スクロールしたページ下部にある「more」ボタンを押すと、ページ遷移することなく次のページが読み込まれ、無限スクロール状態になります。

ページ下部の「more」をクリック

Infinite Scroll -jQueryのプラグイン

• Infinite Scroll -jQueryのプラグイン

Infinite Scrollの使い方

Infinite Scrollの実装は簡単です。
まずは、外部ファイルをセットします。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript" src="http://www.infinite-scroll.com/wp-content/plugins/infinite-scroll/jquery.infinitescroll.js"></script>

スクリプトでロードするアイテムを囲むエレメントをjQueryのセレクタ（#content）で指定します。

<script>
$(function(){
  $('#content').infinitescroll({
 
    navSelector  : "div.navigation",            
                   // selector for the paged navigation (it will be hidden)
    nextSelector : "div.navigation a:first",    
                   // selector for the NEXT link (to page 2)
    itemSelector : "#content div.post"          
                   // selector for all items you'll retrieve
  }); 
});
</script>

ここで使用している3つのオプションは最小の構成です。

navSelector

ナビゲーションのセレクタ

nextSelector

次へのセレクタ

itemSelector

アイテムのセレクタ

オプションでは他に、ローディング時の画像やテキスト、スクロール量などを設定できます。

Infinite Scroll -WordPressのプラグイン

Infinite ScrollはWordPress用のプラグインも用意されています。

Infinite Scroll -WordPressのプラグイン