vue控制滚动条滚动指定位置

// 使用 Vue 控制滚动条滚动到指定位置的示例代码

<template>
  <div ref="scrollContainer" style="overflow-y: scroll; height: 300px;">
    <div v-for="(item, index) in items" :key="index" :id="'item-' + index">
      {{ item }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: Array.from({ length: 50 }, (_, i) => `Item ${i + 1}`)
    };
  },
  methods: {
    scrollToElement(index) {
      // 获取目标元素
      const element = document.getElementById(`item-${index}`);
      if (element) {
        // 滚动到目标元素的位置
        element.scrollIntoView({ behavior: 'smooth' });
      }
    }
  },
  mounted() {
    // 页面加载完成后滚动到指定位置，例如第 25 个元素
    this.scrollToElement(25);
  }
};
</script>

<style scoped>
div[id^="item-"] {
  height: 50px;
  border-bottom: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

解释说明：

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

   • 创建一个带有 overflow-y: scroll 样式的容器 div，并使用 v-for 循环生成多个子元素。
   • 每个子元素都有唯一的 id，以便可以通过 id 来定位。

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

   • data 中定义了一个包含 50 个项目的数组 items。
   • methods 中定义了 scrollToElement 方法，该方法通过 document.getElementById 获取目标元素，并使用 scrollIntoView 方法平滑滚动到该元素。
   • 在 mounted 生命周期钩子中调用 scrollToElement 方法，使页面加载完成后自动滚动到指定位置（例如第 25 个元素）。

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

   • 为每个项目元素设置了高度和边框样式，使其在滚动时更容易识别。