element el-scrollbar 横向滚动条问题解决以及随后引发的下拉框问题修复

在使用vue时，就会有使用到elementUI，之后就是不断的在入坑和天坑之间徘徊。

elementUI中有个隐藏的组件，就是滚动条-----<el-scrollbar></el-scrollbar> 可以参考elementUI的官网代码

这里用F12可以查看到

添加之后会有出现横向滚动的样式（很丑）

这里需要添加一个样式 

.el-scrollbar .el-scrollbar__wrap {overflow-x: hidden;}
 
 

有时候会遇到写上去无法作用上去的问题，这时候需要在滚动元素外，自己添加一个元素   

class或者id + .el-scrollbar .el-scrollbar__wrap {overflow-x: hidden;} 

之后，再重写下面的样式，就会出现和竖向滚动条一样的样式了，如果遇到无法作用上的问题，解决方法和上面一样 

class或者id + .el-tree>.el-tree-node{display:inline-block;}
 
 

转载自 https://blog.csdn.net/fyfy0613/article/details/81480161

---

按作者的做法可以隐藏el-scrollbar横向滚动条，在App.vue样式下添加这句：

.el-scrollbar .el-scrollbar__wrap {overflow-x: hidden;}

但会出现下拉框el-select选项被遮挡问题

此时再加上这句代码就可以解决el-select样式异常：

.el-select-dropdown .el-scrollbar {padding-bottom: 17px;}