解決移動端頁面出現 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