vue2 css滚动条样式美化

Vue2 中，CSS 滚动条样式的美化主要是通过 CSS 的 `::-webkit-scrollbar` 和 `::scrollbar` 规则来定制 WebKit 浏览器（如 Chrome、Safari）以及 Firefox 等现代浏览器的滚动条外观。以下是基本步骤：

1. 首先，在 Vue 组件的样式文件 (.vue 文件的 `<style>` 标签内) 或全局样式（main.css 或 vender.css）中，选择滚动条元素，通常是 `::-webkit-scrollbar`（针对 WebKit 内核）或 `::scrollbar`（Firefox）。

/* 全局滚动条样式 */
::-webkit-scrollbar {
  width: 8px; /* 滚动条宽度 */
}

::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.1); /* 轨道颜色 */
}

::-webkit-scrollbar-thumb {
  background-color: #888; /* 滚动块颜色 */
  border-radius: 4px;
}

/* 当鼠标悬停在滚动条上时改变的样式 */
::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

2. 对于 Firefox，由于语法略有差异，你可以直接使用 `::scrollbar` 代替 `::-webkit-scrollbar`:

/* Firefox 滚动条样式 */
::scrollbar {
  scrollbar-width: thin; /* 设置滚动条宽度 */
}

.scrollbar-thumb {
  scrollbar-color: rgba(0, 0, 0, 0.1) #888; /* 轨道颜色和滚动块颜色 */
}

请注意，对于老版本的 IE 和 Edge，滚动条样式支持有限，上述方法可能无法生效。如果你需要兼容这类浏览器，可能需要考虑使用 JavaScript 库，如 `perfect-scrollbar` 或 `better-scroll` 来实现更复杂的滚动条功能。