vue设置div滚动条滚动到指定位置

// 在 Vue 组件中，可以通过 ref 和 JavaScript 的 scrollTo 方法来设置 div 滚动条滚动到指定位置。

<template>
  <div>
    <div ref="scrollContainer" class="scroll-container">
      <!-- 这里是可滚动的内容 -->
      <div v-for="item in items" :key="item.id">{{ item.text }}</div>
    </div>
    <button @click="scrollToPosition">滚动到指定位置</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        // 更多的 items...
      ]
    };
  },
  methods: {
    scrollToPosition() {
      // 获取要滚动的容器元素
      const container = this.$refs.scrollContainer;

      // 设置滚动位置，例如滚动到顶部距离为 200px
      container.scrollTo({ top: 200, behavior: 'smooth' });
    }
  }
};
</script>

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

解释说明：

1. 模板部分 (<template>):

   • 使用 ref="scrollContainer" 来引用需要滚动的 div 容器。
   • 列表项通过 v-for 循环渲染，模拟大量内容以产生滚动条。
   • 添加一个按钮，点击时触发 scrollToPosition 方法。

2. 脚本部分 (<script>):

   • data 中定义了一个 items 数组，用于生成多个列表项。
   • methods 中定义了 scrollToPosition 方法，该方法使用 this.$refs.scrollContainer 获取到 DOM 元素，并调用 scrollTo 方法滚动到指定位置。behavior: 'smooth' 可以实现平滑滚动效果。

3. 样式部分 (<style>):

   • .scroll-container 设置了固定高度和 overflow-y: auto，以确保当内容超出容器高度时会显示滚动条。

这样就可以在点击按钮时，使 div 滚动到指定位置。