@lemehovskiy/react-scroller

react-scroller

React component for detecting vertical scroll progress.

Demo

Basic Scroller

Basic useScroller

Basic parallax background effect

Gsap(Greensock) parallax background effect

Gsap(Greensock) timeline

🧐 About

React component for detecting vertical scroll progress.

🏁 Getting Started

Installing

npm i @lemehovskiy/react-scroller

Scroller example

App.tsx

import Scroller from "@lemehovskiy/react-scroller/dist";

export default function App() {
  return (
    <>
      <div style={{ height: "100vh", background: "lightgreen" }}></div>
      <Scroller>
        {({ scrollProgress }) => (
          <div style={{ height: "200px", background: "lightblue" }}>
            {scrollProgress}
          </div>
        )}
      </Scroller>
      <div style={{ height: "100vh", background: "lightgreen" }}></div>
    </>
  );
}

useScroller hook example

App.tsx

import { useRef } from "react";
import { useScroller } from "@lemehovskiy/react-scroller/dist";

export default function App() {
  const ref = useRef<HTMLDivElement>(null);

  const { scrollProgress } = useScroller({
    ref
  });

  return (
    <>
      <div style={{ height: "100vh", background: "lightgreen" }}></div>

      <div ref={ref} style={{ height: "200px", background: "lightblue" }}>
        {scrollProgress}
      </div>

      <div style={{ height: "100vh", background: "lightgreen" }}></div>
    </>
  );
}

Scroller API

name	description	type	default
children		children: (props: { scrollProgress?: number }) => JSX.Element
debug	Debug flag property	boolean	false
scrollTriggerOffset	See useScroller hook API below for more details
autoAdjustScrollOffset	See useScroller hook API below for more details

useScroller hook API

name	description	type	default
ref
scrollTriggerOffset	Offset for scroll trigger position. By default, the scroll trigger "start" is placed at the bottom and the trigger "end" at the top. If you want to reduce start offset by 100px you can pass {start: -100, end: 0} or move start offset to the middle of the viewport {start: '-50%', end: 0}	{start: number | string, end: number | string }	{start: 0, end: 0}
autoAdjustScrollOffset	Auto-adjusting start and end offset. This option is helpful if the element is first or last and you can't realize the full progress range. You can manually adjust triggers offset but in this case, you can lose responsive behavior.	boolean	false