vue3中web端div滚动刷新

在Vue 3中，可以使用`v-on:scroll`指令来监听DOM元素的滚动事件，并在滚动到底部时触发刷新操作。下面是一个简单的例子：

<template>
  <div class="scroll-container" v-on:scroll="handleScroll">
    <!-- 在这里放置需要滚动刷新的内容 -->
  </div>
</template>

<script>
export default {
  methods: {
    handleScroll: function (event) {
      const container = event.target
      const atBottom = container.scrollHeight - container.scrollTop === container.clientHeight
      if (atBottom) {
        // 执行刷新操作
      }
    }
  }
}
</script>

<style>
.scroll-container {
  height: 300px;
  overflow-y: scroll;
}
</style>

在上述代码中，我们使用`v-on:scroll`指令监听`scroll-container`元素的滚动事件。在`handleScroll`方法中，我们判断是否滚动到了底部（即`container.scrollHeight - container.scrollTop === container.clientHeight`），如果是，则执行刷新操作。需要注意的是，我们在`div`上设置了`height`和`overflow-y: scroll`样式，使其成为一个可滚动的容器。