useScrollDirection

1'use client'
2 
3import * as React from 'react'
4 
5export type ScrollDirection = 'up' | 'down' | 'left' | 'right' | null
6 
7export function useScrollDirection(ref?: React.RefObject<HTMLElement | null>, delay = 500) {
8  const [scrollDirection, setScrollDirection] = React.useState<ScrollDirection>(null)
9  const lastScrollRef = React.useRef({ y: 0, x: 0 })
10  const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null)
11 
12  React.useEffect(() => {
13    const element = ref ? ref.current : window
14 
15    if (!element)
16      return
17 
18    function handleScroll() {
19      const currentScrollY = element === window ? window.scrollY : (element as HTMLElement).scrollTop
20      const currentScrollX = element === window ? window.scrollX : (element as HTMLElement).scrollLeft
21 
22      let newDirection: ScrollDirection = null
23 
24      if (currentScrollY > lastScrollRef.current.y) {
25        newDirection = 'down'
26      }
27      else if (currentScrollY < lastScrollRef.current.y) {
28        newDirection = 'up'
29      }
30      else if (currentScrollX > lastScrollRef.current.x) {
31        newDirection = 'right'
32      }
33      else if (currentScrollX < lastScrollRef.current.x) {
34        newDirection = 'left'
35      }
36 
37      if (newDirection !== scrollDirection) {
38        setScrollDirection(newDirection)
39      }
40 
41      lastScrollRef.current = {
42        y: currentScrollY,
43        x: currentScrollX,
44      }
45 
46      if (timeoutRef.current) {
47        clearTimeout(timeoutRef.current)
48      }
49 
50      timeoutRef.current = setTimeout(() => {
51        setScrollDirection(null)
52      }, delay)
53    }
54 
55    element.addEventListener('scroll', handleScroll)
56 
57    return () => {
58      if (timeoutRef.current) {
59        clearTimeout(timeoutRef.current)
60      }
61      element.removeEventListener('scroll', handleScroll)
62    }
63  }, [scrollDirection, ref, delay])
64 
65  return scrollDirection
66}