タグ: javaScript

  • 2019年6月時点のjQueryとInfinite Scrollで無限スクロール

    もはや、タイトルが日本語として正しいのかどうかも分からないくらい、JavaScriptが苦手ですが、社内システムを使ってもらうため、果敢に挑戦中です。

    弊社では、過去の図面を検索するときに、WEBにPDFを埋め込んで検索結果として表示していますが、検索結果が多いと、PDFを開くのに時間がかかってしまい、待ちくたびれてしまうので、今回タイトルにあるように、jQueryとInfinite Scrollを使って、小分けにして読み込むように改修しました。

    なぜInfinite Scrollを使うのでしょうか?

    それは、「無限スクロール」で検索したら、ぽろぽろヒットしてきたからです。「Infinite Scrollなんて今さら・・・」みたいな情報も見た気がしますが、お構いなしです。今どきのやり方は見つけられなかったし・・・。とりあえず、機能が実現できればいいかなということで。

    で、WEB上のサンプルコードにお世話になりながら、社内システムにコードを追加して動かしてみましたが、全く動きません!Chromeの「検証」で確認してみると「infiniteScrollなんて関数定義されてないよ」的なエラーを出していました。結構、悩んでいましたが、一向に動く気配を見せないので、Infinite Scrollの公式サイト(英語)を見たら、あっさり解決してしまいました。

    いつからか知りませんが、 infiniteScrollで指定するOptionの名称が変わっているようで、それが原因のようです。私が参考にしていたサンプルコードはちょっと古かったようで、公式サイト(英語)のサンプルを参考にしたら動いてくれました!
    というわけで、備忘録代わりに。

    まずは、HeaderタグにjQueryとInfinite Scrollのjsファイルを指定してあげて、

    <script
      src="https://code.jquery.com/jquery-3.4.1.min.js"
      integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
      crossorigin="anonymous"></script>
    <script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"></script>
    

    Bodyタグの最後の方にInitialize処理を記述してあげます

    <script>
    $('.container').infiniteScroll({
      // options
      path: 'getDrawDataAsyncInfinite.php?page={{#}}', //スクロールしたら読み込む要素とかファイル名とか関数とか。{{#}}を使うと1ずつ増えていきます。左のサンプルでは「getDrawDataAsyncInfinite.php?page=1」、「getDrawDataAsyncInfinite.php?page=2」、「getDrawDataAsyncInfinite.php?page=3」・・・となっていきます。
      append: '.scroll_post', //出力する要素。<div class="scroll_post">...</div>となっていれば、この範囲内を表示してくれます。
      checkLastPage: '.pagination__next', //ここで指定した要素が存在するかどうかで、最後のページかどうかチェックしてくれます。
    });
    </script>

    他にも便利なOptionがあるので、Infinite Scroll – Optionsを参考にしてください。

    あとは、指定した内容に沿って、htmlやPHPを編集します

    ...
    <div class="scroll_post">
        ...//この部分がスクロールしていくと表示されます
        if ( ここが最後のページでなければ ) {
            //checkLastPageで指定したクラスのタグを出力しておきます。
            <p><a class="pagination__next" href="getDrawDaraAsyncInfinite.php"></a></p>
            //Pathにファイル名を指定した場合は、hrefの内容は適当でOKです。
        }
    </div>

    私の英語に対する苦手意識のせいで、時間を浪費してしまいました。英語もっと頑張ります。・・・頑張りたい。