vue获取滚动条的滚动距离

1. 可以通过vue 里面的refs 来获取滚动距离
   （1）注意点1. 在循环体外面的父级上面写ref属性。
   （2）注意点2 路由的路径发生改变的时候对scrollTop 的高度进行初始化,你可以根据自己的需求进行初始化之外的其他处理。
   （3）注意点3 ，写ref的标签的样式上面要有height 和overflow-y属性。
   如下图举例所示：
   

---

点击查看代码

<template>
  <div class="oil-coupons" ref="allScrollTop">
    <!--注意点1. 在循环体外面的父级上面写ref属性 -->
    <div v-for="item in dataList" :key="item.id">
      {{ item.name }}
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      dataList: [
        { id: 1, name: '张三' },
        { id: 2, name: '李四' }
      ]
    }
  },
  watch: {
    $route (to, from) {
      // 注意点2
      // 路由的路径发生改变的时候对scrollTop 的高度进行初始化,
      // 你可以根据自己的需求进行初始化之外的其他处理
      this.$refs.allScrollTop.scrollTop = 0
    }
  }
}
</script>
<style>
/* 注意点3 */
.oil-coupons {
  height: 100px; /* 这个属性要有的 */
  font-size: 14px;
  background: pink;
  overflow-y: auto; /* 这个属性要有的 */
}
</style>

2. 可以使用监听滚动条的事件来获取滚动的距离
   （1）注意点1 在循环体外面的父级上面写ref属性。
   （2）注意点2，写ref的标签的样式上面要有height 和overflow-y 的属性。
   如下图举例：
   

点击查看代码

<template>
  <div class="oil-coupons" @scroll.passive="allScrollTop($event)">
    <!--注意点1. 在循环体外面的父级上面写ref属性 -->
    <div v-for="item in dataList" :key="item.id">
      {{ item.name }}
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      dataList: [
        { id: 1, name: '张三' },
        { id: 2, name: '李四' }
      ]
    }
  },
  methods: {
    allScrollTop (ev) {
      console.log('ev的target', ev.target)
      // 也可以查看其他的属性：scrollHeight，clientHeight等
      console.log('监听ev时时滚动的距离', ev.target.scrollTop)
    }
  }
}
</script>
<style>
/* 注意点2 */
.oil-coupons {
  height: 100px; /* 这个属性要有的 */
  font-size: 14px;
  background: pink;
  overflow-y: auto; /* 这个属性要有的 */
}
</style>