Skip to Content
react-utilsuseScrollProgress

UseScrollProgressEntry

See source on Github 

Data provided to the scroll progress callback.

UseScrollProgressCallback

See source on Github 

Callback type invoked with scroll progress data.

UseScrollProgressOptions

See source on Github 

Options for useScrollProgress.

useScrollProgress

See source on Github 

Registers a “scroll observer” on ref and executes callback when the observed element’s scroll progress changes inside the viewport or a custom container.

  • @param ref - Ref of the element to observe.
  • @param callback - Callback invoked with progress data.
  • @param options - Configuration for the scroll container and enable/disable behavior.
  • @returns void

Example

const ref = useRef<HTMLDivElement>(null); useScrollProgress(ref, (entry) => { console.log('The element\'s inner progress is:', entry.innerProgress) console.log('The element\'s outer progress is:', entry.outerProgress) })