Vue获取滑动距离的一个方法

今天做博客，要做title栏滑动变色，在网上查找了好多，都是瞎编这个方法：

let scrollTop =
        document.documentElement.scrollTop || //firefox
        document.body.scrollTop || //chrome
        window.pageYOffset //safari

打印出来的结果都是0，原因我还没有找到，但是需求还是要实现的

然后开始找问题，发现body的高度始终都没有变过

既然是滑动，那么一定有高度变化的元素存在，最后定位到ul所在页面的div

高度根据内容刷新会变化

那么说明滚动发生在这个div上边，获取此div距离顶部高度，就可以实时监听滚动的发生
贴代码：忽略我对vue的不熟悉，写的不规范

 <el-main style="margin:0 auto;padding:0;min-height: 100vh;
  width: 100%;">
      <div ref="scorll_top">
        <First
          v-if="index_page == items[0].id"
          :text="items[0].id"
        />
        <Java
          v-else-if="index_page == items[1].id"
          :text="items[1].id"
        />
        <Vue
          v-else-if="index_page == items[2].id"
          :text="items[2].id"
        />
      div>

    el-main>

注意绑定的时候true是必须写的，否则不会执行方法

// 自动触发
  mounted: function () {
     
    window.addEventListener('scroll', this.handleScroll, true)
  },

 // 页面销毁前
  beforeDestroy: function () {
     
    window.removeEventListener('scroll', this.handleScroll)
  },

methods: {
     
    handleScroll() {
     
      console.log(
        '距离顶部高度',
        this.$refs.scorll_top.getBoundingClientRect().top
      )
    },
  },

打印结果：滚动高度是老方法，一直是0，代码里没有体现