無限スクロールロードライブラリ

利用方法

上記リンク view repository からgithubのページへアクセスし、

modules/fanchor.js

以下のコードで初期処理を行います。

<script type="module">
  // import文でライブラリをロードする
  import Fanchor from "./js/fanchor.js"
  // Fancor 設定
  const obj = Fanchor({
    anchorSelector: '.anchor',  // このセレクタで表現される要素が画面上に現れた際に下記funcを実行する
    func: someFunction,         // セレクタの要素が画面に表示された際に実行される関数
    fireOnce: false,            // アンカー要素が画面に現れるたびに関数を実行するオプション
  });
  
  // セレクタの要素が画面に表示された際に実行される関数の実装
  function someFunction(){
    ...
  }
</script>

解説

画面のスクロールイベントを監視し、anchorSelectorで指定するセレクタの要素が画面上に表示された際に、funcで指定される関数を実行します。

funcにHTMLへ何かしらの要素を追加する処理を実装すれば、無限スクロール・ロード処理の完成です。

デモでは https://jsonplaceholder.typicode.com/ が提供しているcommentのapiを利用し、 https://picsum.photos/が提供しているフリー素材画像を添えてcardを作っています。

一度に10件表示し、ページ最下部にある空のp要素（p.auto-load-anchorpoint）が画面内に入った際に、非同期通信でデータを取得、親要素であるul要素に作成したli要素をappendChildしています。

再度10件のロードが完了するとアンカーは再びページの欄外に隠れるので、もう一度最下部までスクロールするとまたアンカーが画面内に表示された時点でイベントが発火します。

vanillaなjavascriptで実装

本実装はjqueryその他のライブラリを使用していません。類似のjQuery.autopagerやjScrollと違いRESTやjsonのAPIでも使用可能（ただし自力で通信、要素作成の関数を書く必要はある）です。

また、本ライブラリはscriptタグのmodule属性、fetch関数を使用しているので、これに対応したそこそこ新しいブラウザが動作の対象です。あしからず。