@Byteclaw/use-overflow-scroll-position

React hook for tracking the scroll position inside an overflow:scroll enabled element.

Installation

npm install @byteclaw/use-overflow-scroll-position
yarn add @byteclaw/use-overflow-scroll-position

Usage

Here is a quick example with a simple scrollable div container rendering a children. It can be used with any element ref:

import { useOverflowScrollPosition } from '@byteclaw/use-overflow-scroll-position';

function ScrollableBox(children) {
  const box = useRef(null);
  const [scrollPosition, scrollHeight] = useOverflowScrollPosition(box);

  if (scrollPosition !== null && scrollPosition === scrollHeight) {
    console.log(`You've successfully scrolled to the end, yay!`);
  }

  return <div ref={box}>{children}</div>;
}

API

useOverflowScrollPosition(ref: MutableRefObject<HTMLElement | null>) returns a tuple [number | null, number | null]. The first value is how much of the content you've actually scrolled through, the second value is the content total size, so you can use it for calculations like scrolled percentage. The values are null until the ref is assigned an element.