<div class="demo">
  <div class="scroll">
    <div class="list">
      <div class="card item"></div>
      <div class="card item"></div>
      <div class="card item"></div>
      <div class="card item"></div>
      <div class="card item"></div>
      <div class="card item"></div>
      <div class="card item"></div>
      <div class="card item"></div>
      <div class="card item"></div>
      <div class="card item"></div>
      <div class="card item"></div>
      <div class="card item"></div>
      <div class="card item"></div>
      <div class="card item"></div>
      <div class="card item"></div>
      <div class="card item"></div>
      <div class="card item"></div>
      <div class="card item"></div>
      <div class="card item"></div>
      <div class="card item"></div>
      <div class="card item"></div>
      <div class="card item"></div>
      <div class="card item"></div>
      <div class="card item"></div>
      <div class="card item"></div>
      <div class="card item"></div>
      <div class="card item"></div>
    </div>
    <div class="loading_bar">
      <div class="block">
        <div class="center">
          <div class="spinner dot1"></div>
          <div class="spinner dot2"></div>
          <div class="spinner dot3"></div>
          <div class="spinner dot4"></div>
          <div class="spinner dot5"></div>
          <div class="spinner dot6"></div>
        </div>
      </div>
    </div>
  </div>
</div>

import InfiniteScroll from "infinitescroll";

const wait = (time) => new Promise((resolve) => setTimeout(resolve, time));

const fetchData = async function () {
  await wait(700);
  return {
    data: Array(10).fill('<div class="card item"></div>').join(''),
    fetchData,
  };
};

const callbackFetchData = function () {
  console.log('fetched');
  return { callbackFetchData };
};

const infiniteScroll = new InfiniteScroll({
  scrollContainer: document.querySelector(".scroll"),
  listContainer: document.querySelector(".list"),
  endChecker: {
    container: document,
    targetClass: "loading_bar",
  },
  fetchData,
  callbackFetchData,
  options: { type: "append", expandSize: 15 },
});

infiniteScroll.mount();