[英]Adding an event listener with useEffect hook for scrolling
我正在使用下面的 useEffect 挂钩来感知页面滚动,但它没有将“是”记录到控制台。 我错过了什么? 我的页面滚动超过 50 像素,所以它应该打印出“是”。
useEffect(() => {
const scrollFun = window.addEventListener("scroll", () => {
if(window.pageYOffset%50 === 0) {
console.log("yes");
}
});
return () => {
window.removeEventListener("scroll", scrollFun);
};
}, []);
如果您只想要一个“页面已滚动 50px”,或者您是否正在寻找每 50px 滚动的持续监控,仍然有点不清楚,所以我会尝试回答这两个问题,您可以选择哪个更接近。
这个是微不足道的。 我建议使用 React ref 来“捕获”已将页面滚动至少 50 像素,并在回滚时重置。
const scrolled50Ref = useRef();
useEffect(() => {
const scrollFun = () => {
if (window.pageYOffset > 50) {
if (!scrolled50Ref.current) {
scrolled50Ref.current = true;
console.log('scrolled 50 px');
}
} else {
scrolled50Ref.current = false;
}
}
window.addEventListener("scroll", scrollFun);
return () => {
window.removeEventListener("scroll", scrollFun);
};
}, []);
这并不像您所看到的那样微不足道。 这里的问题是许多浏览器使用加速滚动,因此您不会点击每个pageYOffset
值。 换句话说,在滚动一定的速度/速度后,您可能不会碰到能被 50 整除的pageYOffset
。
这里的“修复”是增加可被 50 整除的“窗口”。
useEffect(() => {
const scrollFun = () => {
if (window.pageYOffset % 50 >= 45) {
console.log("scrolled 50-ish pixels");
}
}
window.addEventListener("scroll", scrollFun);
return () => {
window.removeEventListener("scroll", scrollFun);
};
}, []);
用这个改变你的if
条件:
if (window.pageYOffset > 0)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.