flickable-scroll

demo.mov

---

• Overview
• Examples
• API Reference

---

Overview

flickable-scroll is a flickable web scroller, which handles only scroll jobs. In other words, you can be free to write layout and style and then you just pass scroller options based on it. Let's see examples below.

Examples

This is an example template. Note the changes of options and style in each example.

const ref = useRef<HTMLDivElement>(null);

useEffect(() => {
  const current = ref.current;
  if (current == null) {
    return;
  }

  const options: ScrollerOptions = {
    /* ... */
  };

  const scroller = new FlickableScroller(current);
  return () => scroller.destroy();
}, []);

const style: CSSProperties = {
  /* ... */
};

return (
  <div style={{ width: "100vw", height: "100vh", display: "flex", justifyContent: "center", alignItems: "center" }}>
    <div
      ref={ref}
      style={{
        width: 800,
        height: 800,
        position: "fixed",
        overflow: "hidden",
        ...style,
      }}
    >
      <div style={{ backgroundColor: "lavender", fontSize: 50 }}>Scroll Top</div>
      {Array.from({ length: 2 }).map((_, index) => (
        <Fragment key={index}>
          <div style={{ width: 800, height: 800, flexShrink: 0, backgroundColor: "pink" }} />
          <div style={{ width: 800, height: 800, flexShrink: 0, backgroundColor: "skyblue" }} />
          <div style={{ width: 800, height: 800, flexShrink: 0, backgroundColor: "lavender" }}></div>
        </Fragment>
      ))}
      <div style={{ backgroundColor: "pink", fontSize: 50 }}>Scroll Bottom</div>
    </div>
  </div>
);

Vertical Scroll

const options = {
  direction: "y",
};

const style = {};

2023-07-21.3.42.02.mov

Reversed Vertical Scroll

const options = {
  direction: "y",
  reverse: true,
};

const style = {
  display: "flex",
  flexDirection: "column",
  justifyContent: "flex-end",
};

2023-07-21.3.42.35.mov

Horizontal Scroll

const options = {
  direction: "x",
};

const style = {
  display: "flex",
};

2023-07-21.3.45.17.mov

Reversed Horizontal Scroll

const options = {
  direction: "x",
  reverse: true,
};

const style = {
  display: "flex",
  justifyContent: "flex-end",
};

2023-07-21.3.46.05.mov

API Reference

const options = {
  direction,
  reverse,
  onScrollStart,
  onScrollMove,
  onScrollEnd,
};

const scroller = new FlickableScroller(container, options);

scroller.lock();

scroller.unlock();

scroller.destory();

• Parameters of FlickableScroller:
  • container: HTMLElement
    • Required
    • A scroll container element.
  • options
    • Optional
    • properties
      • direction: "x" | "y"
        • Optional
        • Defaults to "y"
        • A scroll direction
      • reverse: boolean
        • Optional
        • Defaults to false
        • If set to true, scroll direction will be reversed.
      • onScrollStart: (e: ScrollEvent) => void
        • Optional
        • This function will fire when a user starts to scroll
      • onScrollMove: (e: ScrollEvent) => void
        • Optional
        • This function will fire when a user is scrolling
      • onScrollEnd: (e: ScrollEvent) => void
        • Optional
        • This function will fire when a user finishes to scroll
• Methods of FlickableScroller:
  • lock(): () => void
    • This method locks scroll of the scroller.
  • unlock(): () => void
    • This method unlocks scroll of the scroller.
  • destroy(): () => void
    • This method destory the scroller. All event handlers will be removed, and all animations will be stopped.