el-scrollbarelement的滚动条为啥⼀直隐藏如何显现?
⽹上看到有朋友写到
image.png
el-scrollbar 标签栏⾥⾯加上<el-scrollbar >
我这尝试了下 没有什么⽤ 刷新下默认显⽰的时候还是没有显现
操作⼏下触发了⼏下视图才会显现
不知道element为什么隐藏这个组件 是还没有完全开发完吗?
了各种说怎么显现的 都没有什么⽤ 我就I⾃⼰摸索 总结出了个笨办法 但也不是⾮常完美
以下给各位简单说⼀下我的理解:
之前以为在scrollbar外⾯需要加个标签包裹⼀下 设置下⾼
经过尝试发现这个想法没有卵⽤
也就是说 最⼤⼀层设宽⾼的是scrollbar 不需要再考虑它外层的容器了
另外⼀个我个⼈觉得⽐较关键的是:
紧跟着s cr ollb ar⾥⾯带⼀层容器 设置⾼度
⽽这个⾼度设置的越⾼ 则s cr ollb ar滚动条的精度则越⾼
另外⼀个缺点是 如果没有这么多数据 下⾯会空⼀段 不是很雅观
所以 如果⾼度是确定的 ⾃⼰调节s cr ollb ar⾥⾯这个容器的⾼度 直到合适为⽌
如果 ⾼度不定 那么这个办法就不是特别好⽤了 但是能解决默认打开页⾯⿏标划过去就显⽰滚动条的问题
单纯说可能不太好表明什么意思
element表格横向滚动条image.png
这个是⾥⾯的容器设置的相对较⼤ 下⾯显⽰⼀段空⽩,如果数据填满后则显⽰正常
如果设置的⾼度低于scrollbar⾼度则默认不显⽰滚动条
所以说到这 我想说如果不确定⾥⾯内容的⾼度
最好把<el-scrollbar > 后⾯的height设置成固定值 其实也没区别了
另外⼀种情况 就是这个值设置的⽐scrollbar略⼤⼀点 这就可以显⽰滚动条了 但是会出现这种情况
image.png
image.png
长长的滚动条会继续往下滑动,直到消失在底部。
所以,我们有两部分空间可以供我们利⽤ ⼀部分就是在滚动条往下滑的区间,直到滚动条结束,将数据展⽰完毕;
另外⼀个是在将⾥⾯容器的⾼度值稍微设的⼤⼀点 在合适的空⽩⾼度内将数据展⽰完毕;
如果能抓到el-scrollbar从默认隐藏到显⽰触发的某个节点 我们去主动触发这个节点 那么将是最完美的解决办法,等待⼤佬们给讲解⼀下破解之道。