Vue 页面滚动事件捕捉不到,触底更新

Vue 页面滚动事件捕捉不到,触底更新

 

使用这种办法始终是没有触发

 window.addEventListener('scroll',()=>{
    console.log("2")      
 })

 

然后找一下触发到了谁在滚动

 

Performance ->点击录制 然后滚动你的页面 ,然后点击stop 停止录制⏺,就会生成录制的数据

 

在Event_log 的搜索项中 搜关键字 Scroll 如果没有 重新录制一遍,选择紫色的 然后右边就找到了滚动的节点

image.png

 

找到这个节点 然后加上滚动事件

image.png

就可以抓到滚动事件了, Ye

 

然后触底更新 就需要针对这个元素来进行判断了(我是抓 m-main 这个class 的)

 

//获取windows的高度
getWindowHeight() {return document.documentElement.clientHeight;}, 
//获取已经滚动的高度
getScrollHeight() {return Math.max(document.documentElement.getElementsByClassName("m-main")[0].scrollTop,window.pageYOffset||0)}, 
//获取滚动dom的总高度  
getDocumentTop() {return document.documentElement.getElementsByClassName("m-main")[0].scrollHeight},

​

 

//windows高度+已经滚动的高度> 滚动dom总高度
let isBottom = (this.getScrollHeight() +  this.getWindowHeight()) >=  this.getDocumentTop()
if (isBottom){
    console.log("触底更新")
}

 

 

 雨雀地址

https://www.yuque.com/yuanminghang/ex83zv/sca6qn

 

 

 

posted @ 2020-09-11 11:54  万隆  阅读(877)  评论(0)  编辑  收藏  举报