vue项目中onscroll的坑及解决
作者:明月松江
这篇文章主要介绍了vue项目中onscroll的坑及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue项目中onscroll的坑
在项目中需要监听一个组件的scroll事件,以触发到底时加载更多。
但是实际操作下来发现scroll事件并没有被监听到。
通过查询资料得知,监听的目标元素element的scroll事件不冒泡。
解决scroll绑定失败的方法
scroll直接绑定在window的捕获阶段;
window.addEventListener(‘scroll',methodName,true);
还有另外一个方式:
使用谷歌浏览器的开发者工具 performance 录制滚动动作,在event log 里查看scroll事件的目标元素,给这个元素绑定scroll事件。
如下图:
这里我们发现了scroll事件的目标元素是div.info-bottom,我们直接给它绑定scroll事件就可以了。
vue关于滚动事件v-on:scroll
vue关于滚动页面
全局监听滚动
created() { var _this = this; window.addEventListener('scroll',()=>{//触发事件},true); }
局部监听
<!--添加ref--> <div class="headcol" ref="viewBox"> <table> <thead> <tr > <td v-for="c in list.header"> {{c}} </td> </tr> </thead> <tbody> <tr v-for="r in list.rows"> <td v-for="c in r"> {{c}} </td> </tr> </tbody> </table> </div>
// 首先通过$refs获取dom元素 this.box = this.$refs.viewBox // 监听这个dom的scroll事件 this.box.addEventListener('scroll', () => { console.log(this.$refs.viewBox.scrollTop) }, false)
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。