javascript
無限スクロールが簡単に実装できるjs「infinitescroll」【メリットとデメリットも】
2018年09月15日 20:00
こんばんは！社員Aです👩
みなさん、3連休1日目はいかがお過ごしでしょうか？
本日朝公開した、こちらの記事もよかったらご覧くださいね！
さて、今回はサイトで無限スクロールが簡単に実装できるjs「infinitescroll」をご紹介します！
そもそも、無限スクロールって何？
無限スクロールは、ウェブサイトで閲覧者がコンテンツをスクロールすると、ページの切れ目がなく次々とコンテンツが表示されるものです。
Facebookやツイッターなどのソーシャルメディアや、一部のアプリなどでよく採用されていますね。
無限スクロールのメリット
よく、ページネーション（ページ送りして2・3ページ目へ移動するもの）と比較されることが多いのですが、無限スクロールのメリットは下記です。
- ・ページ送りをしなくて良いため、記事を読む・探すことに集中できる
- ・無限にコンテンツが表示されるのが心地よく、ユーザーのページ滞在時間を増やせる
- ・スマホで閲覧するときにも、SNSと同じ感覚で閲覧できる
無限スクロールのデメリット
便利な半面、デメリットもあります。
- ・無限にスクロールされるため、記事数やコンテンツが多い場合はフッターへたどり着けない
- ・見る端末によっては、画面フリーズの危険性（古い端末など）
これらメリット・デメリットを理解した上で、このブログでも無限スクロールを実装しています！
簡単に無限スクロールが実装できる「infinitescroll」を使ってみた！
「infinitescroll」は簡単に無限スクロールが実装できるjsです。早速使ってみました。
サイトへの導入
まずは、下記をフッター・もしくはヘッダーに記述します。
jQueryなしでは動きませんので、必ずjQueryの後に読み込みます。
<script src = "// cdnjs.cloudflare.com/ajax/libs/jquery-infinitescroll/2.1.0/jquery.infinitescroll.min.js"> </ script>
もちろん公式サイトからダウンロードして、読み込むことも出来ます。
無限スクロールの対象となる箇所の組み方を確認
HTML の基本にはなりますが、例えばブログの記事を無限スクロールしたい場合は下記のように組んでおく必要があります。
今回はそれぞれ、記事を囲むものに「kiji_wrap」、記事に「kiji」のクラスを付与しておきます。
<!-- // 記事全体を囲むもの --> <div class="kiji_wrap"> <!-- // 記事 --> <div class="kiji"> <p class="ttl">タイトル</p> <p class="txt">本文</p> </div> </div>
無限スクロールの設定をする
HTMLの組み方が確認できたら、続けて無限スクロールの設定をします。
基本は下記をカスタマイズしていきますが、クラス名などはサイトによって変更が必要です。
.kiji_wrapは先程の記事を囲む大枠のクラスを入れます。
また、これは使用しているテーマによっても異なると思いますが、それぞれ「ページナビ」のクラスと「次へ」のクラスが必要になります。
<script>
$(function(){
$('.kiji_wrap').infinitescroll({
navSelector : ".navigation", // ページナビのクラス
nextSelector : ".navigation a", // ページナビの次へリンクのクラス
itemSelector : ".kiji_wrap .kiji" // 記事のクラス
});
});
</script>
結果、簡単に無限スクロールが実装できた！
無限スクロールは前述した通り、メリット・デメリットがありますが「infinitescroll」を使えば簡単にサイトに無限スクロールを実装することができます。
まだ使用したことが無い方も「いつかは使うかも」と思って試しに実装してみるだけでも、今後役に立つかもしれません！
スルスルと次の記事が出てくる感覚が気に入った！弊社で制作しているサイトでも使ってます！
関連記事
この記事を書いた人
社員A
入社8年目。フロントエンドエンジニア・デザイナーの社員Aです。 小動物が好きで、デグー・チンチラと暮らしています！トレンドの情報を発信できるようにがんばります☺
