React版本18.2 。拒绝废话,像下面这样获取:
import { useEffect, useState } from 'react';
export function Navbar() {
const [visible, setVisible] = useState(true)
const [scrollUp, setScrollUp] = useState(false);
useEffect(() => {
const handleScroll = () => {
const scrollOffset = window.scrollY
if (scrollOffset > 100) {
setVisible(false)
}
if (scrollOffset <= 0) {
setVisible(true)
}
}
const handleWheel = (e: WheelEvent) => {
if (e.deltaY < 0 && !visible) {
setScrollUp(true)
} else {
setScrollUp(false)
}
}
window.addEventListener('scroll', handleScroll)
window.addEventListener('wheel', handleWheel)
return () => {
window.removeEventListener('scroll', handleScroll)
window.addEventListener('wheel', handleWheel)
}
})
}
注意鼠标滚动事件是wheel 。滚动条滚动事件是scroll