useIsScrolled

1'use client'
2 
3import * as React from 'react'
4 
5export type ScrollDirection = 'vertical' | 'horizontal' | 'both'
6 
7export function useIsScrolled(
8  ref: React.RefObject<Element | null>,
9  {
10    threshold = 10,
11    initial = false,
12    direction = 'both',
13  }: { threshold?: number, initial?: boolean, direction?: ScrollDirection } = {},
14) {
15  const [isScrolled, setIsScrolled] = React.useState(initial)
16 
17  const handleScrollEvent = React.useEffectEvent(() => {
18    const element = ref.current
19 
20    if (!element)
21      return
22 
23    const scrollTop = element.scrollTop
24    const scrollLeft = element.scrollLeft
25 
26    let scrolled = false
27    if (direction === 'vertical') {
28      scrolled = scrollTop > threshold
29    }
30    else if (direction === 'horizontal') {
31      scrolled = scrollLeft > threshold
32    }
33    else {
34      scrolled = scrollTop > threshold || scrollLeft > threshold
35    }
36 
37    setIsScrolled(scrolled)
38  })
39 
40  React.useEffect(() => {
41    const element = ref.current
42 
43    if (!element)
44      return
45 
46    const abortController = new AbortController()
47 
48    element.addEventListener('scroll', handleScrollEvent, { passive: true, signal: abortController.signal })
49 
50    return () => {
51      abortController.abort()
52    }
53  }, [ref, threshold, direction])
54 
55  return isScrolled
56}