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

最近用VUE开发移动端页面总是会出现横向滚动条，也就是 X 轴滚动条，用了百分比布局，rem适配宽度，设置了 overflow-x： hidden； 也无法去除，通过各种途径寻找解决方法，在这里记录一下防止之后自己用得到时还需要重新找，也为那些同样有这方面问题的童鞋提供方便。

出现这种问题的主要原因就是，100vw相对于浏览器的window.innerWidth，是浏览器的内部宽度，注意，滚动条宽度也计算在内！而100%是可用宽度，是不含滚动条的宽度，由于内容较多导致出现Y轴滚动条，占用了页面的宽度，从而导致在使用框架做自适应时出现X轴滚动条，影响用户体验。最终只需要在CSS中添加如下代码就可以完美解决。

代码：

html {
overflow-y: scroll;
}

:root {
overflow-y: auto;
overflow-x: hidden;
}

:root body {
position: absolute;
}

body {
width: 100vw;
overflow: hidden;
}


内容参考：https://blog.csdn.net/zx562602419/article/details/81293405