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

最近在写一个需要适配手机移动端的官网，写完后发现移动端总是会出现横向滚动条，也就是 X 轴滚动条，导致页面左右滑来滑去，上图：

 

 很是令人头疼，即使设置了 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;
}