我正在使用下面的 useEffect Hook 来感知页面滚动,但它没有将“yes”记录到控制台。我缺少什么?我的页面滚动超过 50 像素,因此应该打印出“yes”。
useEffect(() => {
const scrollFun = window.addEventListener("scroll", () => {
if(window.pageYOffset%50 === 0) {
console.log("yes");
}
});
return () => {
window.removeEventListener("scroll", scrollFun);
};
}, []);
最佳答案
目前还不清楚您是否只想要一个“页面已滚动 50 像素”,或者您是否正在寻找每 50 像素滚动一次的持续监控,因此我将尝试回答这两个问题,您可以选择更接近的一个。
场景 1 - 滚动前 50 像素并记录
这个是微不足道的。我建议使用 React ref 来“捕获”已滚动页面至少 50px 的内容,并在向后滚动时重置。
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);
};
}, []);
场景 2 - 每滚动 50 像素记录一次
这并不像您所看到的那样微不足道。这里的问题是,许多浏览器都使用加速滚动,因此您不会触及每个 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);
};
}, []);
演示
关于javascript - 添加带有 useEffect 钩子(Hook)的事件监听器以进行滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67395265/