Skip to main content
Version: 1.7.1

Infinite Scroll

Infinite Scroll with Conveyer.
The conveyer can be used in combination with other components.

  • The InfiniteScroll module uses InfiniteGrid.
  • If it is combined with other components, it is difficult to get a ref. You can initialize it by setting autoInit to false and setting the ref directly.
<div class="examples">
  <div class="buttons">
    <button class="prev">prev</button>
    <button class="next">next</button>
  </div>
  <div class="items"></div>
</div>
import { MasonryInfiniteGrid } from "@egjs/infinitegrid";
import Conveyer from "@egjs/conveyer";

const grid = new MasonryInfiniteGrid(".items", {
  container: true,
  gap: 5,
  autoInit: false,
});

grid.on("renderComplete", () => {
  // conveyer.updateItems();
  conveyer.setItems(grid.getItems().map((item) => ({
    element: item.element,
    pos: item.cssContentPos || item.contentPos,
    size: item.contentSize,
  })));
  conveyer.updateContainer();
});
let i = 0;
grid.on("requestAppend", () => {
  ++i;
  grid.append(`<div class="item">${i}</div>`)
});

const conveyer = new Conveyer(".items", {
  preventClickOnDrag: true,
  horizontal: false,
  itemSelector: ".item",
});

const prev = document.querySelector(".prev");
const next = document.querySelector(".next");

// subscribe reactive properties
conveyer.subscribe("isReachStart", (isReachStart) => {
  prev.disabled = isReachStart;
});

conveyer.subscribe("isReachEnd", (isReachEnd) => {
  next.disabled = isReachEnd;
});

// scrollIntoView
prev.addEventListener("click", () => {
  // start to end
  conveyer.scrollIntoView("start", {
    align: "end",
    duration: 500,
    excludeStand: true,
  });
});
next.addEventListener("click", () => {
  // end to start
  conveyer.scrollIntoView("end", {
    align: "start",
    duration: 500,
    excludeStand: true,
  });
});

grid.renderItems();
conveyer.init();