最近写了一个原生HTML的项目, 因为不熟练所以也是一边学一边做的, 开发完成后, 经过测试的同事检查出来一个问题, 就是一个列表中的每一个item都会有一个横向的滚动条..
就像这样的(纵向的滚动条是在修改过程中出现的), 它不仅奇丑无比而且还影响使用, 因为用户在上下滑动时, item中的纵向滚动条会与外层的滚动条发生冲突(手机端使用). 于是我想了想, 还是改吧(不改也不行啊..).
因为HTML本身没有隐藏滚动条的功能, 所以只能想一些其他办法了, 于是基于面向百度编程的思...... 于是开始在网上找资料. 有好多说用 overflow: hidden; 其实我也挺无语的, 你给hidden了那还怎么滚动, 我的需求只是隐藏滚动条, 正常的滚动功能还是要的, 接着找..
又经过一番查找终于找到了一种解决问题的思路--> 这个难看的东西既然没办法主动隐藏, 那我们帮帮它吧, 盖..上...它... 是的盖上不就看不到了吗 (:
那么怎么盖呢? 先说一下思路吧, 首先 如果你要隐藏横向的滚动条你就要先计算出这个item的高度, 同理 你要隐藏纵向的滚动条就要计算出横向的宽度, 一般项目中应该只会出现一个方向的滚动条, 要么横向要么纵向, 我的就是横向的(纵向的那个是在修改的过程中出现的), 下面就以横向的滚动条来说, 高度计算出来了下一步就是覆盖, 原理是嵌套 div. 通常情况在写一个模块的时候在最外层都是用一个div来包裹的, 你要把你计算好的高度写到这个div中, 然后在overflow: hidden; ... 嗯? 刚才不还在吐槽呢吗? 别着急, 还没完. 下一步在这个div里面在写一层div 给它设置一个更大一点的高度 然后 overflow-x: auto; overflow-y: hidden; 完活收工 .
嘿嘿, 怕有些小伙伴看不懂, 我在帖一下代码吧
<div style="overflow: hidden; height: 6rem;">
<div style="white-space: nowrap; overflow-x: auto; overflow-y: hidden; height: 6.5rem;">
...
</div>
</div>
再说说覆盖是怎么实现的吧, 首先外面那层是你的实际计算的高度也就是你的控件展示需要的高度, overflow: hidden; 就是让它不能横向和纵向滚动, 这样也就不会出现滚动条了, 然后里面那层比外面那层高出来0.5rem 其实就是用来覆盖滚动条的, overflow-x: auto; overflow-y: hidden; 因为我的项目中item不需要纵向滚动, 需要横向滚动, 既然横向能滚动那就会有滚动条, 但是他比外面那层高了0.5rem 展示不开 所以就被覆盖掉了, 因为外层的 overflow: hidden; 他滚不上来, 这样滚动条这辈子只能被关在在小黑屋中了..
最后来看一下效果
