解决移动端页面出现 X轴横向滚动条问题

最近在用 Bootstrap 写一个需要适配 WEB 和 WAP 的网站，写完后发现 WAP 端总是会出现横向滚动条，也就是 X 轴滚动条，导致 WAP 端页面左右滑来滑去，很是令人蛋疼，即使设置了 overflow-x： hidden和 width:100% 也无法去除，通过各种途径寻找解决方法，最终在 张鑫旭 大神的一篇文章里找到了最终解决方法，在这里记录一下防止之后自己用得到时还需要重新找，也为那些同样有这方面问题的童鞋提供方便。

 

出现这种问题的主要原因就是，由于内容较多导致出现Y轴滚动条，占用了页面的宽度，从而导致在使用框架做自适应时出现X轴滚动条，影响用户体验。最终只需要在CSS中添加如下代码就可以完美解决，以后妈妈再也不用担心我的代码会出现横向滚动条了。

 

代码：

 

html {

  overflow-y: scroll;

}

 

:root {

  overflow-y: auto;

  overflow-x: hidden;

}

 

:root body {

  position: absolute;

}

 

body {

  width: 100vw;

  overflow: hidden;

}

内容参考自 张鑫旭大神的《小tip:CSS vw让overflow:auto页面滚动条出现时不跳动》

————————————————

版权声明：本文为CSDN博主「喵了__个咪」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/zx562602419/article/details/81293405

解决移动端页面出现 X轴横向滚动条问题