elementui滚动条设置

Element UI 是一套基于 Vue.js 的开源 UI 组件库，它提供了一套美观且易用的界面组件，包括滚动条功能。如果你想自定义 Element UI 中的滚动条样式，可以利用 CSS 来控制。Element UI 提供了一些内置的主题，如默认主题、深色主题等，其中的滚动条默认样式通常会被这些预设的主题覆盖。

要自定义滚动条，你可以通过以下步骤操作：

1. **使用全局样式**: 如果你想让所有 Element UI 元素都采用自定义滚动条，可以在 `main.css` 或全局 CSS 文件中添加样式，比如修改 `.el-webkit-scrollbar` 或 `.el-scrollbar .el-scrollbar__bar` 这些选择器。

/* 针对 webkit 浏览器 */
.el-scrollbar__view::-webkit-scrollbar {
  width: 8px; /* 滚动条宽度 */
}

.el-scrollbar__view::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.4); /* 滚动条颜色 */
}

/* 对于支持 CSS Custom Properties 的浏览器 */
.el-scrollbar {
  scrollbar-width: thin;
}

.el-scrollbar::part(horizontal) {
  scrollbar-track-color: transparent;
  scrollbar-thumb-color: var(--primary-color);
}

2. **局部应用**: 如果只想针对特定元素更改，可以在该元素上直接使用 `style` 属性添加 scoped CSS，例如：

<div class="my-component" style="overflow-y: auto;">
  <!-- ... -->
</div>

<style scoped>
.my-component .el-scrollbar__view::-webkit-scrollbar {
  width: 6px;
}
</style>

记得在浏览器兼容性方面考虑，因为某些滚动条样式可能不适用于所有浏览器。