#Scroll Info

Name: @faceless-ui/scroll-info
Latest:

This is a utility to efficiently subscribe to window scroll events. As components in your application interact with scroll position, they compound scroll listeners which can be expensive to handle. To get around this, the useScrollInfo hook reads context from the <ScrollInfoProvider> — which attaches only a single event listener to the window. These events are also piped through requestAnimationFrame so they are already optimized for performance.

This utility also conveniently interprets scroll data for you, such as direction of scroll, scroll percentage, etc.

#Key features

  • Attaches a single scroll listener to the window for your entire app
  • Throttles these events through requestAnimationFrame
  • Provides critical information about the current scroll position

Scroll your window to see the effect:

{
  "x": 0,
  "y": 0,
  "xDifference": 0,
  "yDifference": 0,
  "xPercentage": 0,
  "yPercentage": 0,
  "totalPercentage": 0,
  "eventsFired": 0,
  "hasScrolled": false
}