vue 监听页面卷去的高度，获取元素离页面顶部的距离

1.首先在mounted生命周期上

mounted() {

    // 监听页面滚动事件

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

  },

2.也别忘了在离开页面前去掉监听

beforeDestroy() {

    window.removeEventListener("scroll", this.handleScroll, true);

  },

3.方法的使用methods

handleScroll(e) {

      let that = this;

      const winHeight =  e.target.scrollTop || document.documentElement.scrollTop;

      // console.log(winHeight);

      //在这里就可以写监听逻辑了

      

      下面是获取元素离页面顶部的距离的使用方法

      //组件

      //this.$refs.$el.tag.xxx.offsetTop(这是网上找到的，但是我实测不行)，

        得换成this.$refs.xxx.$refs.yyy[0].offsetTop(xxx为子组件得ref，yyy为子组件里面的元素ref)

        

      //普通

      //this.$refs.xxx.offsetTop

    },