在 chrome 下实现滚动到最下方自动加载更多,每次都有 2s 左右的延迟,体验非常差。
同样的代码,使用点击“加载更多”按钮就没有延迟。更换浏览器,滚动到最下方自动加载更多也没有出现延迟的 bug。
经过多次的重现问题,明显看到在pc的chrome,使用touch模式延迟偶尔消失,而使用mousewheel延迟又出现。故将问题定位到mousewheel事件 和其相近对应的 scroll事件中。
结合上诉原因并通过查看的几个帖子讨论,得出如下结论:
chrome浏览器的mousewheel事件是引起这一延迟的原因(mousewheel事件不是标准事件,不推荐大家使用),当然!代码中我并没有使用mousewheel事件,但是使用scroll事件就可能会引起mousewheel事件的冲突,而在我们特质的手机客户端中的webview不幸的也命中了这一缺陷。
想要解决这个问题,可以尝试监听这一事件(如果浏览器没有这一事件,也不会响应这一监听,没有冲突),并在事件触发的时候,取消其所有默认行为:
故通过监听其事件模型的 deltaY(鼠标垂直滚动量)当其有垂直位移的时候,触发preventDefault,故代码如下:
window.addEventListener("mousewheel", (e) => {
if (e.deltaY === 1) {
e.preventDefault();
}
})
将这段代码加入前端基础库的页面初始化代码中,神奇的发现相关的页面content-download延迟问题都得到了解决。