mitchellbutler / react-use-is-scrolling

React hook to track whether the window is currently being scrolled.

react-use-is-scrolling

A simple React hook to track whether or not the window is currently being scrolled.

const ScrollIndicator:React.FunctionComponent = () => {
  const { isScrolling } = useIsScrolling()
  return (
    <div>{isScrolling ? "scrolling" : "stopped"}</div>
  )
}

Note - This is not a hook to track the current scroll position. For that, you can check out libraries like react-use-scroll-position.

There are some other properties that can be used to track

const {
  isScrolling, // boolean, true if currently scrolling
  isScrollingX, // boolean, true if scrolling horizontally
  isScrollingY, // boolean, true if scrolling vertically
  scrollDirectionX, // 'none', 'left', 'right'
  scrollDirectionY, // 'none', 'up', 'down'
} = useIsScrolling()

Usage

Install the Library

yarn add react-use-is-scrolling

or

npm install react-use-is-scrolling

Use the Hook

import { useIsScrolling } from 'react-use-is-scrolling'

const ScrollIndicator:React.FunctionComponent = () => {
  const { isScrollingX, isScrollingY, scrollDirectionX, scrollDirectionY } = useIsScrolling()
  return (
    <>
      {isScrollingX && (<div>Scrolling: {scrollDirectionX}</div>)}
      {isScrollingY && (<div>Scrolling: {scrollDirectionY}</div>)}
    </>
  )
}