vue中设置滚动条方式

我来给您详细讲解一下vue中设置滚动条方式的完整攻略，以下是具体步骤：

1. 引入第三方滚动条库

Vue原生并不提供滚动条相关的API，因此我们需要借助第三方库来添加滚动条组件。这里我推荐使用perfect-scrollbar，这是一个轻量级的滚动条插件，使用简单。

我们可以在项目中使用npm安装该插件：

npm install perfect-scrollbar --save

安装完毕后，在需要使用滚动条的页面中，我们可以如下进行引入：

import PerfectScrollbar from 'perfect-scrollbar'
import 'perfect-scrollbar/css/perfect-scrollbar.css'

export default {
  mounted(){
    const container = document.querySelector('.scroll-container')
    this.ps = new PerfectScrollbar(container)
  },
  beforeDestroy(){
    this.ps.destroy()
  }
}

上面的代码中，我们首先引入了perfect-scrollbar的js文件和css文件，然后在mounted钩子中，在需要加滚动条的元素上调用PerfectScrollbar构造函数，最后在beforeDestroy钩子中销毁滚动条实例。

2. 使用CSS属性自定义滚动条样式

如果你不想使用第三方库，你也可以使用CSS自定义原生滚动条的样式。这里提供两个示例：

示例1：

<style>
  .scroll-container {
    overflow-y: scroll;
    scrollbar-width: thin;
    scrollbar-color: gray transparent;
  }
  .scroll-container::-webkit-scrollbar {
    width: 5px;
  }
  .scroll-container::-webkit-scrollbar-track {
    background: transparent;
  }
  .scroll-container::-webkit-scrollbar-thumb {
    background-color: gray;
    border-radius: 10px;
    border: 1px solid transparent;
  }
</style>
<div class="scroll-container">
  <!-- 这里是需要加滚动条的内容 -->
</div>

上面的示例中，我们首先设置了容器元素的overflow-y属性为scroll，以启用垂直滚动条。然后我们使用scrollbar-width属性将滚动条变细，并使用scrollbar-color属性设置滚动条颜色，其中第一个参数为滚动条轨道颜色，第二个参数为滚动条滑块颜色。

接下来我们使用::-webkit-scrollbar伪元素来自定义滚动条样式，其中width属性用于设置滚动条宽度，::-webkit-scrollbar-track伪元素用于设置滚动条轨道的样式，::-webkit-scrollbar-thumb伪元素用于设置滚动条滑块的样式。

示例2：

<style>
  .scroll-container {
    overflow-y: auto;
  }
  .scroll-container::-webkit-scrollbar {
    width: 8px;
  }
  .scroll-container::-webkit-scrollbar-track {
    border-radius: 10px;
    background: #F5F5F5;
  }
  .scroll-container::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #d6d6d6;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  }
</style>
<div class="scroll-container">
  <!-- 这里是需要加滚动条的内容 -->
</div>

上面的示例中，我们同样设置了容器元素的overflow-y属性为auto，然后使用::-webkit-scrollbar伪元素来自定义滚动条样式，这里我们设置了圆角、背景色和阴影等多个属性，以达到自定义滚动条的效果。

以上就是vue中设置滚动条方式的完整攻略，希望对您有所帮助。