vue3中如何实现滚动条

在 Vue3 中，可以使用第三方库或者原生的方法来实现滚动条。以下是两种方法：

1. 使用第三方库

可以使用 vue-scrollto 这个第三方库来实现滚动条。首先需要安装该库：

npm install vue-scrollto

然后在需要使用滚动条的组件中，引入该库：

import VueScrollTo from 'vue-scrollto'

接着在组件的方法中，使用该库提供的 scrollTo 方法来实现滚动：

methods: {
  scrollToTop() {
    VueScrollTo.scrollTo('#top')
  }
}

2. 使用原生方法

在 Vue3 中，可以使用原生的方式来实现滚动条。可以在需要使用滚动条的元素上添加 `overflow: auto` 样式，然后在滚动时触发 `scroll` 事件来实现滚动条的效果。

<div class="scroll-container" @scroll="handleScroll">
  <p>这是一段需要滚动的内容</p>
</div>

.scroll-container {
  height: 200px;
  overflow: auto;
}

methods: {
  handleScroll(event) {
    console.log(event.target.scrollTop)
  }
}

在上面的代码中，当滚动时会触发 `handleScroll` 方法，并且可以通过 `event.target.scrollTop` 获取滚动条的位置。