linhbui98 / use-scroll-progress

Live demo: https://codesandbox.io/s/eager-khorana-p5jwr

useScrollProgress hook

This helps you how progress that you've scroll on a container.

A container can be either

• Window object (full page scroll)
• Any scrolling element (container scroll)

Check it out the demos:

Full page scroll demo

Container scroll demo

How the useScrollProgress() hook is implemented

Browse the file at /src/hooks/useScrollProgress

How to use it

// Full page scroll
const {progress, isAtBottom} = useScrollProgress({
  isFullPageScroll: true,
  onBottomReach: () => console.log('Yay ... bottom reach 🎉'),
})

// Container scroll
const {progress, isAtBottom} = useScrollProgress({
  isFullPageScroll: false,
  containerRef: DOMElement ,
  onBottomReach: () => console.log('Yay ... bottom reach 🎉'),
})

Props

• isFullPageScroll: boolean - Indicate whether using page scroll or container scroll.
• containerRef: object - If isFullPageScroll = false, you need to set this to a DOMElement.
• onBottomReach: function - A callback when user scroll to the bottom of the container.

Output

• progress: number - A value in range of [0, 100] indicating the progress of scrolling.
• isAtBottom: boolean - Let you know if user is at bottom of the container or not.

When isAtBottom = true, I use approximately check only, it means if the scrolling distance is less than or equal to 15px, I'll treat it at bottom. 🙂

License: MIT