use-scroll

1"use client";
2import { useEffect, useState } from "react";
3 
4export function useScroll(downThreshold: number, upThreshold?: number) {
5	const [scrolled, setScrolled] = useState(false);
6	const scrollUpThreshold = upThreshold ?? downThreshold / 2;
7 
8	useEffect(() => {
9		const handleScroll = () => {
10			const y = window.scrollY;
11			// Hysteresis: different thresholds for up/down to prevent flickering
12			setScrolled((prev) => {
13				if (prev) {
14					// Currently scrolled - only unscroll when below lower threshold
15					return y > scrollUpThreshold;
16				}
17				// Currently not scrolled - only scroll when above higher threshold
18				return y > downThreshold;
19			});
20		};
21 
22		window.addEventListener("scroll", handleScroll, { passive: true });
23		handleScroll();
24		return () => window.removeEventListener("scroll", handleScroll);
25	}, [downThreshold, scrollUpThreshold]);
26 
27	return scrolled;
28}