背景:使用el-dropdown下拉菜单时,发现el-dropdown-menu 在设置高度和溢出的情况下仍无法添加滚动轴。
方法也可在普通盒子上生效:
1、添加滚动轴
.el-dropdown-menu {
overflow: auto; // 添加滚动条
max-height: 50px; // 最大高度
overflow-x: hidden; // 隐藏x轴上的滚动条
}
2、自定义样式
.el-dropdown-menu::-webkit-scrollbar {
width: 5px; // 设置滚动轴宽度
background-color: #f5f5f5;
}
.el-dropdown-menu::-webkit-scrollbar-track {
//覆盖滑道样式
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
background-color: #f5f5f5;
}
.el-dropdown-menu::-webkit-scrollbar-thumb {
//覆盖滑块样式
background-color: #ff0000;
border-radius: 3px;
}