vue项目中onscroll的坑
在项目中需要监听一个组件的scroll事件,以触发到底时加载更多。
但是实际操作下来发现scroll事件并没有被监听到。
通过查询资料得知,监听的目标元素element的scroll事件不冒泡。
解决scroll绑定失败的方法是:scroll直接绑定在window的捕获阶段;
window.addEventListener(‘scroll’,methodName,true);
还有另外一个方式:
使用谷歌浏览器的开发者工具 performance 录制滚动动作,在event log 里查看scroll事件的目标元素,给这个元素绑定scroll事件。如下图:
vue项目中onscroll的坑_加载更多
这里我们发现了scroll事件的目标元素是div.info-bottom,我们直接给它绑定scroll事件就可以了。