關於後臺管理系統導航選單的滾動條樣式修改的問題
<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;
}