mirror of
https://github.com/MacRimi/ProxMenux.git
synced 2025-11-18 19:46:18 +00:00
44 lines
1.1 KiB
TypeScript
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 }
|
||
|
|
}
|