屏幕滚动事件没有触发
来源：8-6 加载更多功能实现
帅气的灯泡
2019-02-25
代码如下：
handleScroll = () => {
const scrollTop =
document.documentElement.scrollTop || document.body.scrollTop;
const screenHeight = document.documentElement.clientHeight;
const likeListTop = this.myRef.current.offsetTop;
const likeListHeight = this.myRef.current.offsetHeight;
if (scrollTop >= likeListHeight + likeListTop - screenHeight) {
const newData = this.state.data.concat(dataSource);
const newLoadTimes = this.state.loadTimes + 1;
setTimeout(() => {
this.setState(() => ({
data: newData,
loadTimes: newLoadTimes
}));
}, 1000);
}
};我认为这行代码出了问题，
if (scrollTop >= likeListHeight + likeListTop - screenHeight)
因为改成
if (scrollTop >= 1)
理所当然，就执行了
用的是最新的谷歌浏览器
写回答
2回答
-
你好，我使用Chrome的最新版本72.0.3626.119进行验证，没有发现你的问题。这个判断条件是没有问题的，你可以先在浏览器的正常PC模式下（不使用手机模式）测试下滚动刷新是否生效，然后在切到手机模式测试，可以多换几个手机分辨率测试。你的问题有可能是因为在手机模式下，浏览器在某些情况下，对DOM高度计算错误导致滚动刷新条件未生效。
112019-02-26 -
幽幽三途河
2019-06-21
我今天也遇到你这个问题，我的解决方案是：把 ref 定位到 list 部分，而不是整个 LikeList 组件的开头（因为这样还包括了 header 部分，所以在计算的时候 scrolleTop 是不会大于等于计算之后的可滚动高度）。
30
相似问题