elementel-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;}
按作者的做法可以隐藏el-scrollbar横向滚动条,在App.vue样式下添加这句:.el-scrollbar .el-scrollbar__wrap{overflow-x: hidden;}
但会出现下拉框el-select选项被遮挡问题
此时再加上这句代码就可以解决el-select样式异常:html横向滚动条样式
.el-select-dropdown .el-scrollbar{padding-bottom: 17px;}

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。