Vue.js 中自定义滚动条样式：实现可滚动 div 元素

在 Vue.js 中，可以使用 CSS 样式来控制一个 div 元素的滚动条。以下是实现步骤：

1. 首先，在 Vue 组件中的 template 部分，添加一个 div 元素，设置一个特定的 class 名字，例如 'scrollable-container'。

   ```html
   <template>
     <div class='scrollable-container'>
       <!-- 内容 -->
     </div>
   </template>
   ```
   

2. 在 CSS 样式文件中，添加以下样式规则，用于定义滚动条的样式：

   ```css
   .scrollable-container {
     overflow-y: scroll; /* 添加垂直滚动条 */
     scrollbar-width: thin; /* 滚动条宽度，可以调整为 thin, auto 等 */
   }
   
   .scrollable-container::-webkit-scrollbar {
     width: 8px; /* 滚动条宽度 */
     background-color: #f5f5f5; /* 滚动条背景颜色 */
   }
   
   .scrollable-container::-webkit-scrollbar-thumb {
     background-color: #888; /* 滚动条滑块颜色 */
     border-radius: 4px; /* 滚动条滑块圆角 */
   }
   
   .scrollable-container::-webkit-scrollbar-thumb:hover {
     background-color: #555; /* 滚动条滑块悬停时颜色 */
   }
   
   .scrollable-container::-webkit-scrollbar-track {
     background-color: #f5f5f5; /* 滚动条轨道颜色 */
   }
   ```
   

3. 在 Vue 组件中的 style 部分引入 CSS 样式文件。

   ```html
   <style>
   @import 'styles.css';
   </style>
   ```
   

这样，就可以在 Vue.js 中实现一个带有滚动条的 div 元素。你可以根据需要调整滚动条的样式，包括颜色、宽度等。