daybrush

// Original: https://daybrush.com/moveable/storybook2/?path=/story/combination-with-other-components--use-selecto-with-multiple-group

import { deepFlat } from "@daybrush/utils";
import { useKeycon } from "!croffle!keycon";
import Selecto from "!croffle!selecto";
import Moveable, { MoveableTargetGroupsType } from "!croffle!moveable";
import "./cube.css";
import { GroupManager } from "@moveable/helper";
export default function App() {
  function $created() {

daybrush

import * as React from "react";
import { useConveyer } from "@egjs/react-conveyer";

export default function HorizontalScroll() {
  const ref = React.useRef<HTMLDivElement>();
  const {
    isReachStart,
    isReachEnd,
  } = useConveyer(ref);
  return <div className="examples">

daybrush

import Conveyer from "@egjs/conveyer";

const conveyer = new Conveyer(".items");

// Reads reactive properties
conveyer.isReachStart;
conveyer.isReachEnd;

// Subscribes reactive properties
conveyer.subscribe("isReachStart", isReachStart => {

daybrush

import Conveyer from "@egjs/conveyer";

const conveyer = new Conveyer(".items");

conveyer.on("reachStart", () => {
  // An event is fired when the scroll reaches the start point.
});
conveyer.on("reachEnd", () => {
  // An event is fired when the scroll reaches the end point.
});

daybrush

import Conveyer from "@egjs/conveyer";

const conveyer = new Conveyer(".items");

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

prev.addEventListener("click", () => {
  // start to end
  conveyer.scrollIntoView("start", {

daybrush

import Conveyer from "@egjs/conveyer";

const conveyer = new Conveyer(".items");

// scrollTo(pos, duration);
conveyer.scrollTo(1000, 500);

// scrollTo(pos, duration);
conveyer.scrollBy(100, 500);

daybrush

container.addEventListener("wheel", e => {
  e.preventDefault();
});

daybrush

body {
  overscroll-behavior: none;
}

daybrush

import { MasonryInfiniteGrid, STATUS_TYPE } from "@egjs/infinitegrid";

const ig = new MasonryInfinitegrid("#container", {
    gap: 5,
});

// gets visible infos. However, the information is simplified for invisible items.
ig.getStatus(STATUS.MINIMIZE_INVISIBLE_ITEMS);

daybrush

import { MasonryInfiniteGrid } from "@egjs/infinitegrid";

const ig = new MasonryInfinitegrid("#container", {
    gap: 5,
});

ig.gap = 10;