Skip to main content
Version: 1.2.0

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();