vue3滚动条重置

在Vue 3中，如果你想要重置滚动条到顶部，可以使用原生JavaScript操作DOM元素的scrollTop属性。这里是一个简单的例子：

<template>
  <div class="scroll-container" ref="scrollContainer">
    <!-- 滚动内容 -->
  </div>
  <button @click="resetScroll">回到顶部</button>
</template>
 
<script setup>
import { ref } from 'vue';
 
const scrollContainer = ref(null);
 
function resetScroll() {
  if (scrollContainer.value) {
    scrollContainer.value.scrollTop = 0;
  }
}
</script>
 
<style>
.scroll-container {
  height: 400px; /* 设置一个固定高度 */
  overflow: auto; /* 开启滚动 */
}
</style>

在这个例子中，我们有一个带有scroll-container类的容器，它包含滚动内容。我们使用ref属性来获取DOM元素的引用。当点击按钮时，resetScroll函数会被调用，它将滚动容器的scrollTop属性设置为0，从而将滚动位置重置到顶部。