关于后台管理系统导航菜单的滚动条样式修改的问题

<aside class="test1">

<el-menu :default-active="$route.path" unique-opened router class="demo" style="backgroundColor: #2d3e50;">

<template v-for="(item,index) in menuList ">

<el-submenu v-if="item.children && item.children.length" :index="index+''" >

<template slot="title"><i class="el-icon-menu"></i>{{item.permissionName}}</template>

<el-menu-item v-for="(node,i) in item.children" :key="node.permissionUrl" :index="node.permissionUrl"><i class="el-icon-document"></i>{{node.permissionName}}</el-menu-item>

</el-submenu>

<el-menu-item v-else :index="item.permissionUrl"><i class="el-icon-document"></i>{{item.permissionName}}</el-menu-item>

</template>

</el-menu>

</aside>

给外层包裹一层aside 或者 div 加样式：

如果不想要滚动条将宽度设为 0 滚动条照样可以滑动

.test1::-webkit-scrollbar {

width: 8px;

height: 8px;

}

.test1::-webkit-scrollbar-track {

opacity: 0;

transition: opacity 0.12s ease-out;

-webkit-border-radius: 2em;

-moz-border-radius: 2em;

border-radius: 2em;

}

.test1::-webkit-scrollbar-thumb {

/* background-color: rgb(178, 177, 176); */

background-color: hsla(220, 4%, 58%, 0.3);

/* opacity: 0; */

transition: background-color 0.3s;

-webkit-border-radius: 2em;

-moz-border-radius: 2em;

border-radius: 2em;

}