elementUi滚动条的使用及原始滚动条样式设置

在Element UI中，如果你想要为一个元素设置滚动条并且自定义滚动条的样式，你可以使用<el-scrollbar>组件。以下是一个简单的例子：

1. 首先，确保你已经在项目中安装并引入了Element UI。
2. 在你的Vue组件中，使用<el-scrollbar>包裹需要滚动的内容。
3. 使用CSS可以自定义滚动条的样式。

<template>
  <el-scrollbar class="custom-scrollbar">
    <!-- 这里是你需要滚动显示的内容 -->
    <p v-for="item in 100" :key="item">{{ item }}</p>
  </el-scrollbar>
</template>
 
<style>
/* 自定义滚动条样式 */
.custom-scrollbar .el-scrollbar__bar {
  background-color: #d3dce6; /* 滚动条颜色 */
}
 
.custom-scrollbar .el-scrollbar__thumb {
  background-color: #babac3; /* 滚动条滑块颜色 */
}
 
/* 鼠标悬停滚动条时的样式 */
.custom-scrollbar .el-scrollbar__bar:hover {
  background-color: #a6a6a6;
}
 
/* 鼠标悬停滚动条滑块时的样式 */
.custom-scrollbar .el-scrollbar__thumb:hover {
  background-color: #8b8b8b;
}
</style>

在上面的代码中，.custom-scrollbar是用来给<el-scrollbar>元素添加自定义样式的类。你可以根据需要修改滚动条和滑块的样式。

请注意，Element UI的滚动条样式是基于其默认的样式变量来设置的，如果需要更深度的自定义，可能需要在Element UI的样式变量中覆盖相应的值。