vue 中scroll事件不觸發問題

在vue項目中須要監聽滾動條滾動的位置，結果寫了scroll監聽事件就是不生效，最後查資料發現是頁面有樣式設置了over-flow：scroll，去掉以後完美解決.(頁面樣式中存在over-flow：scroll，over-flow：auto的時候scroll事件監聽不起做用，因此排查問題的時候首先須要考慮當前頁面樣式中是否存在over-flow)；

 

 

export default {

methods: {

handleScroll() {
var that = this;
//滾動條在y軸上的滾動距離
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
//文檔的總高度
var documentScrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
//瀏覽器窗口的高度
var getWindowHeight = document.documentElement.clientHeight || document.body.clientHeight;
if (scrollTop > 10) {
that.isclass = true;
that.iswhite= true;
} else {
console.log('xiaoyu ');
that.isclass = false;
that.iswhite= false;
}

//滾動條距離頁面頂部的距離大於一屏時觸發該方法

if (scrollTop + getWindowHeight == documentScrollHeight) {

    that.loadMore();
}
}

 

},

mounted() {   //監聽scroll事件
window.addEventListener('scroll', this.handleScroll);
},
destroyed() { //頁面離開後銷燬，防止切換路由後上一個頁面監聽scroll滾動事件會在新頁面報錯問題

window.removeEventListener('scroll', this.handleScroll)
}
}