ElementUI设置侧边栏滚动_element ui 侧边栏菜单设置滚动条

1. 使用element的隐藏组件 el-scrollbar

   在el-scrollbar外包裹一层div,el-scrollbar需要加上高度，否则无法滚动

   <template>
   	<div class="side-bar">
           <el-scrollbar style="height: 100%;">
               ...
           </el-scrollbar>
       </div>
   </template>
   
   <style lang="scss" scope>
       .side-bar {
           width: 30%;
       }
   </style>
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13

   大概会是这样子的一个界面

2. 继续给外层的div添加样式

   给一个相对浏览器定位的布局，定位在左侧

   <style lang="scss" scope>
       .side-bar {
           width: 30%;
           position: fixed;
           left: 0;
           top: 0;
           bottom: 0;
           overflow: hidden;
       }
   </style>
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10

   会产生这样一个样式

可以看到滚动条显示出来，竖向滚动条显示的是element的滚动条，而横向的是原生滚动条

3. 隐藏横向滚动条

   <style lang="scss" scope>
   	.side-bar {
           width: 30%;
           position: fixed;
           left: 0;
           top: 0;
           bottom: 0;
           overflow: hidden;
           
           .el-scrollbar__wrap {
               overflow-x: hidden;
           }
       }
   </style>
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14

横向滚动条隐藏，竖向滚动正常