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