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