vue页面滚轮滑动距顶部的距离

1.ref定位

在一个大容器里添加ref定位，计算滚轮滑动之后距离这个容器顶部的高度

<div ref="total" class="total">

</div>

2.data数据

定义一个高度数据，实时返回

   data() {
    return {
      scrollHeight:0,
    };
  },

3.mounted实时监测

实时监测滚动函数，再加上对象生命周期结束时，释放其占用的资源

 mounted() {
    this.$refs.total.addEventListener('scroll', this.handleScroll);
    }
  beforeDestroy() {
    this.$refs.total.removeEventListener('scroll', this.handleScroll);
  },

4.滚动函数

设置滚动函数，实时输出鼠标滚动距离

handleScroll() {
      this.scrollHeight = this.$refs.total.scrollTop;
      console.log("高度",this.scrollHeight)
    },

5.需要定位到顶部

如果需要定位到顶部的话，需要写一个click方法

 uptop(){
      const element = this.$refs.total;
      const rect = element.offsetTop + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0);
      this.$nextTick(() => {
        this.$refs.total.scrollTop = rect
      });
    },

这样就实现啦！
后续发现，这个很有可能出现著容器定位滑动不了的问题，更换一段代码实现：

    const element = this.$refs.total;
      const rect = element.offsetTop + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0);

      console.log(rect)
      window.scrollTo({
        top: rect,
        behavior: 'smooth'
      });