Vue2-Element-ui滚动条美化

<el-scrollbar
    style="height: calc(100vh - 60px);"
    class="scrollbar-for"
>
    <el-aside width="210px" class="el-scrollbar__wrap">  //里层盒子有一个el-scrollbar__wrap的class样式
        <common-aside></common-aside>
    </el-aside>
</el-scrollbar>

// 设置滚动条
.scrollbar-for {
    .el-scrollbar__wrap {
        overflow-x: hidden; // 底部横向滚动条进行隐藏
    }
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
#app, html , body{
    height: 100%;
}
/* 隐藏滚动条 */
::-webkit-scrollbar {
    width: 5px !important;
}
/* 滚动条背景颜色 */
::-webkit-scrollbar {
    background-color: #fff !important;
}
/*滚动条样式设置*/
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
{
    border-radius: 0;
    background-color: rgba(0,0,0,0.1);
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: rgba(0,0,0,0.1);
}
/* 设置垂直滚动条的宽度和水平滚动条的高度 */
::-webkit-scrollbar{
    width: 8px;
    height: 8px;
}
/* 设置滚动条的滑轨 */
::-webkit-scrollbar-track {
    background-color: #fff;
}
/* 滑块 */
::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 4px;
}