Scroll-rig NPM

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

styled-components

@infinitebrahmanuniverse/nolb-scro @everything-registry/sub-chunk-2720

4 years ago

4 years ago

4 years ago

4 years ago