2019-10-25 vue 解决window.addEvent

一般给当前模版设置监听都是这样写
在 mounted函数中

window.addEventListener("scroll", this.handleScroll);

然后调用方法

handleScroll() {
                var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
                console.log(scrollTop + "scrollTop")

            },

这样就可以实时监听到滚动数据

之前一直是可以监听到的，后来突然发现不好使了，根本原因就是给body设置了overflow：scroll属性，导致了

window.addEventListener("scroll", this.handleScroll);

失效。

此时的解决办法是

<template>
    <div class="container" id='move' :class="{active:flag}" ref="ct">
        
    </div>
</template>

需要监听的组件this.$refs的形式拿到元素的dom节点,代码如下,在mounted函数中

            this.box = this.$refs.ct
            this.box.addEventListener('scroll', () => {
                this.handleScroll();
            }, false)

然后调用方法：

handleScroll() {
                var scrollTop = this.$refs.ct.scrollTop;
                // console.log(scrollTop);
            },

此时便可以完美解决 window.addEventListene ( )失效问题