解决手机端自适应页面出现 X轴滚动条问题

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zx562602419/article/details/81293405

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

出现这种问题的主要原因就是，由于内容较多导致出现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页面滚动条出现时不跳动》