useDragScroll

useDragScroll.ts

import * as React from 'react'
import { useDrag } from 'react-use-gesture'
import { useSpring, config } from '@react-spring/web'

function clamp(min: number, val: number, max: number) {
  return Math.min(Math.max(min, val), max)
}

const isServer = typeof window === 'undefined'

function useDragScroll() {
  const scrollX = isServer ? 0 : window.scrollX
  const scrollY = isServer ? 0 : window.scrollY
  const isMouseAction = React.useRef(false)

  const [values] = useSpring(
    {
      from: {
        x: scrollX,
        y: scrollY,
      },
      onChange: {
        x(value: number) {
          document.documentElement.scrollLeft = value
        },
        y(value: number) {
          document.documentElement.scrollTop = value
        },
      },
      config: config.slow,
    },
    [],
  )

  function setX(value: number) {
    const minScrollLeft = 0
    const maxScrollLeft =
      document.documentElement.scrollWidth -
      document.documentElement.clientWidth
    const to = clamp(minScrollLeft, values.x.goal + value, maxScrollLeft)
    values.x.start({ to })
  }

  function setY(value: number) {
    const minScrollTop = 0
    const maxScrollTop =
      document.documentElement.scrollHeight -
      document.documentElement.clientHeight
    const to = clamp(minScrollTop, values.y.goal + value, maxScrollTop)
    values.y.start({ to })
  }

  React.useEffect(() => {
    function handleWheel() {
      if (values.x.is('ACTIVE') || values.y.is('ACTIVE')) {
        values.x.stop()
        values.y.stop()
      }
      values.x.set(window.scrollX)
      values.y.set(window.scrollY)
    }

    function handlePointerDown(event: PointerEvent) {
      if (event.pointerType === 'mouse') {
        isMouseAction.current = true
      }
    }

    function handlePointerUp() {
      isMouseAction.current = false
    }

    window.addEventListener('wheel', handleWheel)
    window.addEventListener('pointerdown', handlePointerDown)
    window.addEventListener('pointerup', handlePointerUp)

    return function teardown() {
      window.removeEventListener('wheel', handleWheel)
      window.removeEventListener('pointerdown', handlePointerDown)
      window.removeEventListener('pointerup', handlePointerUp)
    }
  }, [values])

  useDrag(
    ({ delta: [x, y] }) => {
      if (isMouseAction.current) {
        setX(-x)
        setY(-y)
      }
    },
    {
      domTarget: isServer ? undefined : document.documentElement,
    },
  )
}

export { useDragScroll }