scroll-rig

Scroll Rig

A React scroll rig for custom scroll bar styles and controlled scrolling state.

Getting Started

Install the package:

npm add scroll-rig

Basic Example

A callback with the state object to do something with

<ScrollRig
  // Do something when the scroll updates
  onScrollUpdate={(state) => console.log(state.progress.y)}
>
  components...
</ScrollRig>

API Example

Usage of the API via a ref. Call methods or read state from the API of the ScrollRig.

function Example() {
  const scrollRef = React.useRef();

  React.useEffect(() => {
    scrollRef.current.update();
  }, []);

  return (
    <ScrollRig
      ref={scrollRef}
      // Do something when the scroll updates
      onScrollUpdate={(state) => console.log(state.progress.y)}
    >
      components...
    </ScrollRig>
  );
}

Important

Make sure the parent element for the ScrollRig has overflow: hidden on it or the ScrollRig won't work

Props

Prop	Type	Default	Description
onScrollUpdate	(state) => {}	undefined	Callback for every scroll event with current scroll state
native	boolean	false	When true will switch to the native browser scroll
scrollBarSize	string	15px	Size of the scrollbars
classNamePrefix	string	scroll-rig	Prefix for the classes on the scroll elements
controlled	boolean	false	If true will disable scroll until api.update() is called

API

Prop	Type	Description
update	() => {}	Update the scroll
onScroll	(fn) => {}	Callback function executed on every scroll event
state	object	State of the scroll rig

Contributing

Install and run the development server:

npm install
npm start