JavaScriptで無限スクロールを実装する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptで無限スクロールを実装する方法について解説しています。無限スクロールを導入するメリット、jScrollを利用した無限スクロールの例を説明します。サンプルコードで動作を確認してみましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

JavaScriptで無限スクロールを実装する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

無限スクロールを実装する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

無限スクロールとは

大量のコンテンツを表示させて、その名の通り終わりなく数ロールさせるテクニックのことです。

無限スクロールはユーザーに大量の情報を簡単に提供させることで、コンテンツへの滞留時間を長引かせるこが出来ます。また、画面切り替えではなく、スクロールのみで実現するのでユーザーフレンドリーで且つスマホなどの利用にも適しています。ただし、大量のデータを読み込むため動作が重くなることも考慮する必要があります。

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

無限スクロールを実装する方法

実装する方法はいくつかあります。jQueryで「Infinite Scroll」,「jScroll」などが有名です。基本的にはスクロールが下に行ったときに次ページを自動的に表示させることで実現します。今回は、「jScroll」を利用した方法を紹介したいと思います。

jScrollで気を付ける点は下記になります。

スクロールさせたいコンテンツをclassで囲みます。例では「<div class=”jscroll”> ~</dev>」の範囲です。その中にa要素の次ページを指定します。この時、自身を指定すれば無限に自分自身を繰り返します。

パラメータの内容は

  • loadingHtml:読み込み中の文字、画像等を指定することも可能です
  • autoTrigger:読み込み方の指定:自動( true ) or ボタンクリック( false )
  • padding:指定したコンテンツの下から何pxで読み込むか指定します
  • nextSelector:’a.[class名]’ a要素を指定します
  • contentSelector:'[class名]’  読み込む範囲を指定、指定がなければページ全体を読み込みます

 

実際に書いてみよう

<!DOCTYPE html>

<html>

  <head>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

    <script src="js\jscroll-master\jquery.jscroll.js"></script>

    <style>

      .grid{

        display:grid;

        gap: 10px;

        grid-template-columns: repeat(4, 200px);

      }

    </style>

  </head>

  <body>

    <header>

      <h1>猫のいる日常</h1>

    </header>

    <div class="jscroll">

      <dev class=grid>

        <img src="img/01.jpg">

        <img src="img/02.jpg">

        <img src="img/03.jpg">

        <img src="img/04.jpg">

        <img src="img/05.jpg">

        <img src="img/06.jpg">

        <img src="img/07.jpg">

        <img src="img/08.jpg">

        <img src="img/09.jpg">

        <img src="img/10.jpg">

      </dev>

      <footer>

        <a class="jscroll-next" href="./JavaScript_jScroll2.html">next</a>

      </footer>

    </div>

  <script>

    var jscrollOption = {

        loadingHtml: 'now loading',

        autoTrigger: true,

        padding: 20,

        nextSelector: 'a.jscroll-next',

        contentSelector: '.jscroll'

      }

      $('.jscroll').jscroll(jscrollOption);

  </script>

  </body>

</html>

 

まとめ

無限ループを実現するには簡単に行えました。ただ、実際のサイトへの実装となるともう少し手を加える必要があります。また、ローカルで実行すると「CROS」エラーになるので、テストする場合はWEBサーバー経由で行ってください。

 

監修してくれたメンター

小宮山晃史(こみやまこうじ)

現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。

iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは、初心者でも最短4週間でJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。