UseScrollPosition

1'use client';
2 
3import { useCallback, useEffect, useState } from 'react';
4 
5export type ScrollPosition = {
6  x: number;
7  y: number;
8};
9 
10export type UseScrollPositionOptions = {
11  onChange?: (x: number, y: number) => void;
12};
13 
14export function useScrollPosition(
15  options: UseScrollPositionOptions = {},
16): ScrollPosition {
17  const isBrowser = typeof window !== 'undefined';
18  const { onChange } = options;
19 
20  const [scrollPosition, setScrollPosition] = useState<ScrollPosition>({
21    x: isBrowser ? window.scrollX : 0,
22    y: isBrowser ? window.scrollY : 0,
23  });
24 
25  const handleScroll = useCallback(() => {
26    const x = window.scrollX;
27    const y = window.scrollY;
28    setScrollPosition({ x, y });
29    if (onChange) {
30      onChange(x, y);
31    }
32  }, [onChange]);
33 
34  useEffect(() => {
35    if (!isBrowser) {
36      return;
37    }
38    window.addEventListener('scroll', handleScroll, { passive: true });
39    // Initialize position on mount
40    handleScroll();
41    return () => {
42      window.removeEventListener('scroll', handleScroll);
43    };
44  }, [handleScroll, isBrowser]);
45 
46  return scrollPosition;
47}