Function useScroll

packages/core/src/hooks/useScroll.ts:37–81

({
  container,
  ...springOptions
}: UseScrollOptions = {})

 * @returns {SpringValues<{scrollX: number; scrollY: number; scrollXProgress: number; scrollYProgress: number}>} SpringValues the collection of values returned from the inner hook
 */
export const useScroll = ({
  container,
  ...springOptions
}: UseScrollOptions = {}): SpringValues<{
  scrollX: number
  scrollY: number
  scrollXProgress: number
  scrollYProgress: number
}> => {
  const [scrollValues, api] = useSpring(
    () => ({
      scrollX: 0,
      scrollY: 0,
      scrollXProgress: 0,
      scrollYProgress: 0,
      ...springOptions,
    }),
    []
  )

  useIsomorphicLayoutEffect(() => {
    const cleanupScroll = onScroll(
      ({ x, y }) => {
        api.start({
          scrollX: x.current,
          scrollXProgress: x.progress,
          scrollY: y.current,
          scrollYProgress: y.progress,
        })
      },
      { container: container?.current || undefined }
    )

    return () => {
      /**
       * Stop the springs on unmount.
       */
      each(Object.values(scrollValues), value => value.stop())

      cleanupScroll()
    }
  }, [])

  return scrollValues
}