Files
ProxMenux/AppImage/hooks/use-scroll-direction.ts
2025-10-17 19:51:41 +02:00

44 lines
1.1 KiB
TypeScript

"use client"
import { useState, useEffect } from "react"
export function useScrollDirection() {
const [scrollDirection, setScrollDirection] = useState<"up" | "down" | null>(null)
const [isAtTop, setIsAtTop] = useState(true)
useEffect(() => {
let lastScrollY = window.scrollY
let ticking = false
const updateScrollDirection = () => {
const scrollY = window.scrollY
// Check if we're at the top of the page
setIsAtTop(scrollY < 10)
// Only update direction if we've scrolled more than 5px
if (Math.abs(scrollY - lastScrollY) < 5) {
ticking = false
return
}
setScrollDirection(scrollY > lastScrollY ? "down" : "up")
lastScrollY = scrollY > 0 ? scrollY : 0
ticking = false
}
const onScroll = () => {
if (!ticking) {
window.requestAnimationFrame(updateScrollDirection)
ticking = true
}
}
window.addEventListener("scroll", onScroll)
return () => window.removeEventListener("scroll", onScroll)
}, [])
return { scrollDirection, isAtTop }
}