JavaScript(infinite-scroll)で無限スクロールの実装

どうも、はぐっです・ω・♪

JavaScript(infinite-scroll.js)で無限スクロールを実装

Webサイトを制作していく中で、
同じ属性のコンテンツを多く提供することがあるかと思います。

多量コンテンツの提供はページネーション？

まぁページネーションやんなー
って、今までやったら全然何の迷いもなくなってた。
ここに関しては、お前が知らんかっただけやろ。みたいな話は…受け付けません←

でも果たしてこういうとき、ページネーションしか方法がないのだろうか？
と、いや、あるよな、よくアプリとかで見るで。ってなって、
調べたら、すぐに。極めてすぐに見つかりました。

無限スクロールという方法

スクロールが閾値を超えたら、次の数件を表示。
また閾値を超えたら、次の数件を表示。表示！表示！
という形で、どんどん下へ下へ次のコンテンツを表示していくスタイル。

これも、同じ属性のコンテンツを多く提供する一つの方法であるかと思います。

これからは無限スクロールでいけばいいの？
どうですか？
そんな簡単な話ではなさそうですね！

ページネーションと無限スクロールの使い分け

じゃあどういうときにページネーション使うねん？
どういうときに無限スクロール使うねん？

私は

次へ次へとコンテンツを送っていった時に

一度見たコンテンツをもう一度見たい！と、後戻りする場合はページネーション

一度見たコンテンツはもう見ない！と、後戻りしない場合は無限スクロール

これがユーザ的には嬉しいのではないかなって思います。

infinite-scroll.jsで実装！

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

試しに書いてみる。
オプションはいっぱいあるわけやけど、とりあえず最低限使いそうなところだけおさえておく。

$('#js-wrapper').infinitescroll({
  navSelector  : 'ナビゲーションのセレクタ',
  nextSelector : '次へ、を実現するタグのセレクタ',
  itemSelector : '追加する要素のセレクタ'
});

そうね。
スクロールしたらページネーションの「次へ」を叩くようになっているイメージ！

例えば

<div id="js-wrapper" class="haguhoms">
  <ul class="haguhoms__list">
    <li class="haguhoms__item">
      ~~~~
    </li>
  </ul>
  <div class="pagination">
    <span class="pagination__page"></span>
    <span class="pagination__next">
      <a rel="next" href="~~">次へ</a>
    </span>
  </div>
</div>

っていうのがあったとしたら、

$('#js-wrapper').infinitescroll({
  navSelector  : 'nav.pagination',
  nextSelector : 'nav.pagination a[rel=next]',
  itemSelector : '#js-wrapper li.haguhoms__item'
});

はい、きたー。
これで最低限動くようにはなったかな！

他にも

loading: {
  img     : 'ローディング中に出す画像のパス',
  msgText : 'ローディング中に出す文章'
}

とか

errorCallback: function() {
  // エラーもしくは最後の要素が読まれた時に呼ばれるコールバック
}

とか

$('#js-wrapper').infinitescroll({

}, function(elements) {
  // 一回分が追加されるときに呼ばれるコールバック
  // ちなみにelementsには、要素一個ずつ呼ばれるのではなく、一回分の要素が一回ですべて入ってくる
});

とか
とにかくいろいろできます！

出す時にふわっと出したいとかアニメーションつけたいとかあったら、こういうところをカスタマイズしていくことになりそうですな〜

要所要所で最適な解を導き出すために、こういう選択肢は常に増やしていくことを心がけたいものですね！