问题描述:
一个包含下拉加载的页面,刷新当前页然后滚动页面,能够正常触发滚动事件并调用回调函数,但是如果是进了某一个页面然后再进的该页面,滚动事件能够触发,
但是回调函数在滚动的时候只能被调用一次。
关键代码:
包含下拉加载的页面中,mounted中绑定scroll,在beforeRouteLeave中取消事件绑定
this.ele.addEventListener('scroll', this.getInvitationRecordUserList);
问题定位:
从其他页面进了之后再进该页面都可以正常滚动(在chrome浏览器上调试的时候,删除debugger再调试滚动事件,不然会影响调试),就某一个页面(记为a页面)进了再进就不行。
猜测:a页面中有影响滚动事件回调函数调用的方法,会不会是调用了阻止默认事件?
在a页面中发现如下代码:
这是一段处理在页面有弹窗时禁止弹窗下面的内容滚动的代码。
updated() {
const noScroll = (e) => {
e.preventDefault();
};
const body = document.body;
const html = document.querySelector('html');
if (this.show) {
this.$el.addEventListener('touchmove', noScroll, {passive: false});
} else {
this.$el.removeEventListener('touchmove', noScroll, {passive: false});
}
body.style.overflowY = this.show ? 'hidden' : 'auto';
html.style.overflowY = this.show ? 'hidden' : 'auto';
},
我们通过定位可能是调用了阻止默认事件的方法定位到这段代码,但最后发现了是body设置了auto影响了滚动回调函数的调用(不知道为什么会这样),最终改写了写法,在下拉加载的那个页面去使用局部滚动而不是使用全局滚动,那么其他页面的代码就不会影响这个页面的功能。
总结:不要随便在全局对象上去改东西,这样很容易出现不同页面相互影响的情况:
1、不要随便修改body/html的样式
2、不要用window.onscroll去绑定回调函数,用订阅模式去创建事件监听