React hook for calculating number of pixels scrolled through in an overflow:scroll enabled container
Last updated 5 months ago by michalkvasnicak .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @byteclaw/use-overflow-scroll-position 
SYNC missed versions from official npm registry.


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


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


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>;


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.

Current Tags

  • 1.0.1                                ...           latest (5 months ago)

2 Versions

  • 1.0.1                                ...           5 months ago
  • 1.0.0                                ...           a year ago
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (0)
Dev Dependencies (2)
Dependents (1)

Copyright 2014 - 2016 © taobao.org |