vue3 设置滚动条

// 在 Vue 3 中设置滚动条的示例代码

<template>
  <div ref="scrollContainer" class="scroll-container">
    <!-- 这里放置需要滚动的内容 -->
    <div v-for="item in items" :key="item.id" class="item">
      {{ item.text }}
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const scrollContainer = ref(null);
    const items = ref([
      { id: 1, text: 'Item 1' },
      { id: 2, text: 'Item 2' },
      { id: 3, text: 'Item 3' },
      // 更多项目...
    ]);

    // 当组件挂载后，可以对滚动容器进行操作
    onMounted(() => {
      // 设置滚动条位置到顶部
      scrollContainer.value.scrollTop = 0;

      // 或者设置滚动条位置到某个特定位置
      // scrollContainer.value.scrollTop = 100;
    });

    return {
      scrollContainer,
      items,
    };
  },
};
</script>

<style scoped>
.scroll-container {
  height: 300px; /* 设置固定高度 */
  overflow-y: auto; /* 允许垂直滚动 */
  border: 1px solid #ccc;
}

.item {
  padding: 10px;
  border-bottom: 1px solid #eee;
}
</style>

解释说明：

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

   • 使用 ref 绑定一个 DOM 元素 (scrollContainer)，以便在 JavaScript 中访问它。
   • 使用 v-for 循环渲染多个项目，这些项目将被包含在一个可滚动的容器中。

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

   • 使用 ref 创建对 DOM 元素的引用 (scrollContainer) 和数据 (items)。
   • 使用 onMounted 钩子，在组件挂载后执行一些操作，例如设置滚动条的位置。
   • 可以通过 scrollTop 属性来控制滚动条的位置。scrollTop = 0 表示滚动到顶部，也可以设置为其他值来滚动到特定位置。

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

   • 设置 .scroll-container 的高度和 overflow-y: auto 来启用垂直滚动。
   • 添加一些简单的样式使内容更美观。

这个示例展示了如何在 Vue 3 中使用原生的 DOM API 来控制滚动条的位置。