react-tiny-autoscroll

Automatically scrolls the element when the cursor approaches the boundaries.

Demo

Mostly helpful when used in combination with drag and drop-like components which do not support scrollable containers.

Install via npm

1npm install react-tiny-autoscroll

or

1yarn add react-tiny-autoscroll

Usage

1const containerRef = useRef();
2
3useAutoScroll({
4  containerRef,
5});
6
7// Making our container scrollable
8const style: CSSProperties = {
9  height: 400,
10  overflowY: "auto",
11  border: "1px solid red",
12};
13
14return (
15  <div ref={containerRef} style={style}>
16    {items.map((n) => (
17      <Item key={n} />
18    )}
19  </div>
20);

API

• containerRef - reference to the scrollable container
• skip - lets you disable/enable the scrolling
• threshold - distance to boundaries where scrolling will start
• maxSpeed - maximum number of pixels allowed to scroll in 10ms