el-dialog里自定义滚动条
时间: 2023-11-19 14:55:48 浏览: 188
自定义滚动条
el-dialog里自定义滚动条可以通过CSS样式来实现。可以使用sass或less写法或原生写法来实现。下面是两种写法的示例代码:
1. sass或less写法:
```css
.el-dialog__wrapper .el-dialog__body {
/* 必须有高度 */
height: 400px;
/* 自动出现滚动条 */
overflow: auto;
/* 滚动条样式 */
&::-webkit-scrollbar {
width: 5px;
}
&::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 10px;
}
&::-webkit-scrollbar-track {
background: #f5f5f5;
}
}
```
2. 原生写法:
```css
.el-dialog__wrapper .el-dialog__body {
/* 必须有高度 */
height: 400px;
/* 自动出现滚动条 */
overflow: auto;
}
.el-dialog__wrapper .el-dialog__body::-webkit-scrollbar {
width: 5px;
}
.el-dialog__wrapper .el-dialog__body::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 10px;
}
.el-dialog__wrapper .el-dialog__body::-webkit-scrollbar-track {
background: #f5f5f5;
}
```
阅读全文