滚动条被导航栏遮住问题
解决前
解决过程
一开始想要body的宽度为整个视口的宽度 100vw view width
不过出现了横向滚动条
于是乎想着给所有元素增加 x轴溢出时隐藏
问题解决,不过顶部的导航栏由于设置了fixed
又把右边导航栏挡住了
可能因为 body
占100视口宽度vw,而滚动条属于多余部分给他隐藏了
可以将该隐藏设置在body
处
看样子虽然问题得到解决了,不过还是有点问题,由于设置了100vw视口宽度,
这个宽度是不把滚动条算进去的 也就是说滚动条把body挡住了一部分,这也
说明了为什么前面会多出了横向滚动条,是这因为100vw+垂直滚动条的宽度,
导致你想看到完整的body就会出现横向滚动条
优化解决方案
抛弃100vw这种计算单位,使用100%,让他的宽度为html父盒子的100%宽度
而非视口,这样到时候计算body的宽度就为 html+垂直滚动条=100视口宽度
将垂直滚动条宽度包含进去,就不会出现body内容被覆盖而出现横向滚动条了
二者对比
使用100vw和overflow-x hidden 和 width:100%