vue中滚动事件绑定的函数无法调用问题

问题描述:

   一个包含下拉加载的页面,刷新当前页然后滚动页面,能够正常触发滚动事件并调用回调函数,但是如果是进了某一个页面然后再进的该页面,滚动事件能够触发,

但是回调函数在滚动的时候只能被调用一次。

关键代码:

包含下拉加载的页面中,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去绑定回调函数,用订阅模式去创建事件监听

   

原文地址:https://www.cnblogs.com/yy95/p/9776146.html