無限スクロールを作れるJSプラグイン Infinite Scrol の実装メモです。
無限スクロールを実装する際にはサイトの使い勝手が悪くならないように。「フッターが見れない」といったことがないように注意したいところです。検索エンジンとの相性も考える必要があります。
【参考】検索エンジンとの相性を考慮した無限スクロールのベストプラクティス | Google Search Central Blog
インストール or ファイル読み込み
今回はCDNを使います。ダウンロードやパッケージマネージャーからのインストールもできます。詳しくは公式サイトで
JavaScript
<script src="https://unpkg.com/infinite-scroll@5/dist/infinite-scroll.pkgd.min.js"></script>基本の作り方
まずは無限スクロールさせたいコンテンツを作ります。後から表示させるコンテンツは別ページで作ります。
HTML
<div class="post_wrap">
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
</div>
<p class="pagination">
<a class="pagination__next" href="./page2">Next page</a>
</p>JavaScript
let elem = document.querySelector('.post_wrap');
let infScroll = new InfiniteScroll( elem, {
// options
path: '.pagination__next',
append: '.post',
hideNav: '.pagination'
});初期化は以下のような書き方もOK。
JavaScript
let infScroll = new InfiniteScroll( '.post_wrap', {
// options
});data-infinite-scroll 属性を指定して、HTMLで初期化することもできます。
PHP
<div class="post_wrap" data-infinite-scroll='{ "path": ".pagination__next", "append": ".post" }'>
<div class="post">post</div>
<div class="post">post</div>
<div class="post">post</div>
</div>1ページ目で指定したページ（ここでは「page2」）も作成します。
HTML
<div class="post_wrap">
<div class="post">page2post</div>
<div class="post">page2post</div>
<div class="post">page2post</div>
</div>カテゴリー : JavaScript
