@byteclaw/use-overflow-scroll-position
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.

@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.

Current Tags

  • 1.0.1                                ...           latest (5 months ago)

2 Versions

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

Copyright 2014 - 2016 © taobao.org |