Simple util function for handling scrolls in react-virtual

useScroll.ts

import { MutableRefObject, useCallback, useRef } from 'react'

interface UseScrollToProps {
  parentRef: MutableRefObject<HTMLDivElement>
}

// https://gist.github.com/gre/1650294
const easeInOutQuint = t => {
  return t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * --t * t * t * t * t
}

export const useScrollTo = ({ parentRef }: UseScrollToProps) => {
  const scrollingRef = useRef<number>()

  const scrollToFn = useCallback((offset, defaultScrollTo) => {
    const duration = 300
    const start = parentRef.current.scrollTop
    const startTime = (scrollingRef.current = Date.now())

    const run = () => {
      if (scrollingRef.current !== startTime) return
      const now = Date.now()
      const elapsed = now - startTime
      const progress = easeInOutQuint(Math.min(elapsed / duration, 1))
      const interpolated = start + (offset - start) * progress

      if (elapsed < duration) {
        defaultScrollTo(interpolated)
        requestAnimationFrame(run)
      } else {
        defaultScrollTo(interpolated)
      }
    }

    requestAnimationFrame(run)
  }, [])

  return { scrollToFn }
}