javascript - Adding an event listener with useEffect hook for scrolling
问题描述
I am using the useEffect hook below to sense the page scroll but it is not logging "yes" to the console. What am I missing? My page is scrolling more than 50px so it should print out "yes".
useEffect(() => {
const scrollFun = window.addEventListener("scroll", () => {
if(window.pageYOffset%50 === 0) {
console.log("yes");
}
});
return () => {
window.removeEventListener("scroll", scrollFun);
};
}, []);
解决方案
如果您只想要一个“页面已滚动 50px”,或者您是否正在寻找每 50px 滚动的持续监控,仍然有点不清楚,所以我会尝试回答这两个问题,您可以选择哪个更接近。
场景 1 - 先滚动 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);
};
}, []);
场景 2 - 每滚动 50 像素记录一次
这并不像您所看到的那样微不足道。这里的问题是许多浏览器使用加速滚动,所以你不会点击每个 pageYOffset
值。换句话说,在滚动某个速度/速度后,您可能不会达到pageYOffset
50 的整除数。
这里的“修复”是增加可被 50 整除的“窗口”。
useEffect(() => {
const scrollFun = () => {
if (window.pageYOffset % 50 >= 45) {
console.log("scrolled 50-ish pixels");
}
}
window.addEventListener("scroll", scrollFun);
return () => {
window.removeEventListener("scroll", scrollFun);
};
}, []);
演示
推荐阅读
- android - 在 Android 房间库中使用 Singleton
- tfs - TFS2018 获取构建定义修改日期
- post - 错误:422 无法处理的实体/使用 pjax 发送带有帖子的表单
- django - Kubernetes 集群中 django 应用程序的 Nginx 配置
- tcp - 双向数据传输 - 串行到 Eth (Socat) (RPi)
- php - 我在哪里出错了,我的代码不会回显某些部分?
- angularjs - 单元测试嵌套承诺 angularjs/jasmine
- performance-testing - 安装 loadrunner 独立 truclient12.56 版本时出错
- .net - 无法卸载 .Net Framework 4.5.3
- python - 使用 Flask import app.module 和 importlib.reload(app.module)