無限スクロールプラグイン infinite scroll

投稿日：2017年6月13日更新日：2020年5月7日

無限スクロールのプラグインについていろいろ調べてきましたが、今回はテーブル形式でなく、通常の無限スクロールができるもの(イメージとしてはtwitterっぽい遷移。)

infinte scroollというライブラリです。名前そのまんまですね・・・)

Contents

1 公式
2 インストール
3 注意点
4 参考リンク

公式

https://github.com/metafizzy/infinite-scroll

インストール

bowerに下記のように書いてもいいですし、公式サイトからそのままダウンロードしてもＯＫ。

  "dependencies": {
    "jquery-infinite-scroll": "^2.1.0"
  }

"dependencies": {

"jquery-infinite-scroll": "^2.1.0"

}

使い方(※もっといろいろありますが、必要最低限のもの)

JavaScript

<script type="text/javascript">
$('.contents_block').infinitescroll({
        navSelector : '.navigation',
        nextSelector : '.navigation a',
        itemSelector :'.index_contents_area',
        loading: {
            msg: null,
            msgText: "<strong>次のページを読み込んでいます。</strong>"
          },
});
</script>

$('.contents_block').infinitescroll({

navSelector : '.navigation',

nextSelector : '.navigation a',

itemSelector :'.index_contents_area',

loading: {

msg: null,

msgText: "<strong>次のページを読み込んでいます。</strong>"

});

</script>

HTML

<div class="contents_block">
    
    <!-- 各データ-->
    <div class="index_contents_area">
        ・・・
    </div>

    <div class="index_contents_area">
        ・・・
    </div>
    
    <div class="index_contents_area">
        ・・・
    </div>
</div>

<!-- 次へ-->
<div class="navigation">
    <span class="next"><a href="/items/index/page:2" rel="next">次のページ</a></span>   
</div>

・・・

</div>

・・・

</div>

・・・

</div>

<span class="next"><a href="/items/index/page:2" rel="next">次のページ</a></span>

</div>

これで下にスクロールすると自動的にページリンクをクリックしていくかのようにページが遷移される感じになります。

注意点

dataTableと違って非常に簡単な反面、次へのページリンクに数字が入っていないとだめっぽいです。これに気づくまでに結構時間かかりました・・・。普通のページャーを使っていて無限スクロールに切り替えたい場合便利だと思います。

参考リンク

【jQuery】無限スクロール［Infinite Scroll］を極限までカスタマイズ

どのやり方がいい？ブクマしておくと便利なjQuery無限スクロールまとめ

CakePHPクッキング　無限スクロールをさせる