vue监听某个div滚动条滚动事件，距离顶部的距离，实现一个demo

可以使用Vue的自定义指令来监听div滚动事件，并通过计算滚动条距离顶部的距离来实现。下面是一个简单的demo：

<template>
  <div class="scroll-container" v-scroll-top="onScroll">
    <div class="scroll-content">
      <!-- 内容 -->
    </div>
  </div>
</template>

<script>
export default {
  directives: {
    scrollTop: {
      bind(el, binding, vnode) {
        el.addEventListener('scroll', binding.value)
      },
      unbind(el, binding, vnode) {
        el.removeEventListener('scroll', binding.value)
      }
    }
  },
  methods: {
    onScroll(event) {
      const scrollTop = event.target.scrollTop
      console.log(scrollTop) // 滚动条距离顶部的距离
      // 可以在这里做一些滚动时的操作
    }
  }
}
</script>

<style>
.scroll-container {
  height: 200px;
  overflow: auto;
}
</style>

在上面的代码中，我们使用了自定义指令`v-scroll-top`来监听滚动条滚动事件，并将事件绑定到`onScroll`方法上。在`onScroll`方法中，我们通过`event.target.scrollTop`获取滚动条距离顶部的距离，并可以在这里做一些滚动时的操作。最后，我们在模板中使用`v-scroll-top`指令来绑定滚动容器，并将内容放在容器内部。