無限スクロールが簡単に実装できる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の後に読み込みます。

 

もちろん公式サイトからダウンロードして、読み込むことも出来ます。

 

無限スクロールの対象となる箇所の組み方を確認

HTML の基本にはなりますが、例えばブログの記事を無限スクロールしたい場合は下記のように組んでおく必要があります。

今回はそれぞれ、記事を囲むものに「kiji_wrap」、記事に「kiji」のクラスを付与しておきます。

 

無限スクロールの設定をする

HTMLの組み方が確認できたら、続けて無限スクロールの設定をします。

基本は下記をカスタマイズしていきますが、クラス名などはサイトによって変更が必要です。

.kiji_wrapは先程の記事を囲む大枠のクラスを入れます。

また、これは使用しているテーマによっても異なると思いますが、それぞれ「ページナビ」のクラスと「次へ」のクラスが必要になります。

 

結果、簡単に無限スクロールが実装できた!

無限スクロールは前述した通り、メリット・デメリットがありますが「infinitescroll」を使えば簡単にサイトに無限スクロールを実装することができます。

まだ使用したことが無い方も「いつかは使うかも」と思って試しに実装してみるだけでも、今後役に立つかもしれません!

スルスルと次の記事が出てくる感覚が気に入った!弊社で制作しているサイトでも使ってます!

 

スポンサーリンク

この記事を書いた人

社員A

社員A

フロントエンドエンジニア・デザイナーの社員Aです。 多分一番更新頻度が多いかと思います。このブログのテーマも作成しました。日本語力が乏しく…社内のみんなからも指摘をされるので、ブログの執筆を通じて語彙力強化していきたいです✨ 家ではデグーとチンチラという小動物を飼っていて、かなり溺愛しています…!小動物がすきな皆さま、小動物トークしましょう!