useScrollPosition()
<img alt="Bundlephobia" src="https://img.shields.io/bundlephobia/minzip/@react-hook/window-scroll?style=for-the-badge&labelColor=24292e"><img alt="Types" src="https://img.shields.io/npm/types/@react-hook/window-scroll?style=for-the-badge&labelColor=24292e"><img alt="NPM Version" src="https://img.shields.io/npm/v/@react-hook/window-scroll?style=for-the-badge&labelColor=24292e"><img alt="MIT License" src="https://img.shields.io/npm/l/@react-hook/window-scroll?style=for-the-badge&labelColor=24292e">
npm i @react-hook/window-scroll
A React hook for updating components when the scroll position of the window on the y-axis changes. This hook throttles updates to the scroll position using useThrottle() at
30fps by default, but this rate is configurable.Quick Start
Check out the example on CodeSandbox```jsx harmony import useScrollPosition from '@react-hook/window-scroll'
const Component = (props) => { const scrollY = useScrollPosition(60 /fps/) return
scroll pos: {scrollY}
}
```API
useScrollPosition(fps?: number): number
A hook that performantly updates its scroll position at a constant frame rate.Arguments
| | Type | Default | Description | | --- | -------- | ------- | ----------------------------------------------------------------------------- | | fps |number | 30 | Defines the rate in frames per second at which the scroll position is updated |Returns scrollY: number
| | Type | Description |
| ------- | -------- | ------------------------------------------------------- |
| scrollY | number | The current scroll position of the window on the y-axis |