useIsWindowScrolled

1'use client'
2 
3import * as React from 'react'
4 
5const isBrowser = typeof window !== 'undefined'
6 
7export function useIsWindowScrolled(
8  { threshold = 10 }: { threshold?: number } = {},
9) {
10  const scrollTop = isBrowser ? window.scrollY || window.pageYOffset || document.documentElement.scrollTop || 0 : 0
11  const scrollLeft = isBrowser ? window.scrollX || window.pageXOffset || document.documentElement.scrollLeft || 0 : 0
12 
13  const [isScrolled, setIsScrolled] = React.useState(scrollTop > threshold || scrollLeft > threshold)
14 
15  const handleScrollEvent = React.useEffectEvent(() => {
16    setIsScrolled(scrollTop > threshold || scrollLeft > threshold)
17  })
18 
19  React.useEffect(() => {
20    window.addEventListener('scroll', handleScrollEvent, { passive: true })
21 
22    return () => {
23      window.removeEventListener('scroll', handleScrollEvent)
24    }
25  }, [threshold])
26 
27  return isScrolled
28}