無限スクロールが簡単に実装できるjs「infinitescroll」【メリットとデメリットも】

         

javascript

無限スクロールが簡単に実装できるjs「infinitescroll」【メリットとデメリットも】

2018年09月15日 20:00 

無限スクロールが簡単に実装できるjs「infinitescroll」【メリットとデメリットも】

こんばんは!社員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です。 小動物が好きで、デグー・チンチラと暮らしています!トレンドの情報を発信できるようにがんばります☺