vue3里改滚动条样式

在Vue3中改变滚动条样式通常有两种方法：

1. **全局修改** (推荐)
- 使用CSS变量（CSS Custom Properties）来统一管理滚动条样式。在项目的根组件或者一个自定义的全局CSS文件中，定义滚动条相关的变量，例如：

     :root {
       --scroll-bar-background: rgba(0, 0, 0, 0.5); // 设置滚动条背景颜色
       --scroll-bar-thumb: rgba(0, 0, 0, 1);     // 设置滚动条滑块颜色
     }
     
     .vue-scrollable {
       scrollbar-width: thin;                 // 自定义滚动条宽度
       scrollbar-track: var(--scroll-bar-background);
       scrollbar-thumb: var(--scroll-bar-thumb);
     }

将`.vue-scrollable`替换成需要更改滚动条的元素选择器。这样所有匹配该选择器的元素都会采用相同的滚动条样式。

2. **局部修改**
- 如果只需要在个别组件内部改变滚动条样式，可以在对应的组件样式文件或者每个组件的`.vue`文件内的`<style scoped>`标签内直接编写滚动条样式，例如：

     <template>
       <div class="custom-scrollbar">
         <!-- ... -->
       </div>
     </template>

     <script setup>
       import { ref } from 'vue';
     </script>

     <style scoped>
       .custom-scrollbar {
         scrollbar-width: thin;
         scrollbar-track: red;
         scrollbar-thumb: blue;
       }
     </style>

这样滚动条将在`<div class="custom-scrollbar">`内及其子元素中生效。