事件监听器不监听下一个JS的滚动事件

Question

我试图更新状态，并在导航显示阴影，如果用户滚动，但它不听事件。
我使用的是nextJS 13和顺风css。

const [shadow, setShadow] = useState(false);
useEffect(() => {
const handleShadow = () => {
if (window.scrollY >= 90) {
setShadow(true);
} else {
setShadow(false);
}
window.addEventListener("scroll", handleShadow, true);
};
return window.removeEventListener("scroll", handleShadow);
}, []);

在我的div

<div
className={
shadow
? "fixed left-0 top-0 w-full z-10 ease-in duration-300 bg-[#112240] shadow-xl"
: "fixed left-0 top-0 w-full z-10 ease-in duration-300 bg-[#112240]"
}
>
other code
</div>

Answer 1

代码中的问题来自于您在handleShadow函数中初始化事件侦听器的事实，因此只需将其移出函数体就可以解决问题。

const [shadow, setShadow] = useState(false);
useEffect(() => {
const handleShadow = () => {
if (window.scrollY >= 90) {
setShadow(true);
} else {
setShadow(false);
}
};
window.addEventListener("scroll", handleShadow, true); //moved it out the function's body
return window.removeEventListener("scroll", handleShadow);
}, []);

Answer 2

试试这个

useEffect(() => {
const handleShadow = () => {
if (window.scrollY >= 90) {
setShadow(true);
} else {
setShadow(false);
}
};
window.addEventListener("scroll", handleShadow);
}, []);