最近在用 Bootstrap 寫一個需要適配 WEB 和 WAP 的網站，寫完後發現 WAP 端總是會出現橫向滾動條，也就是 X 軸滾動條，導致 WAP 端頁面左右滑來滑去，很是令人蛋疼，即使設定了 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;
}

內容參考自 張鑫旭大神的《小tip:CSS vw讓overflow:auto頁面滾動條出現時不跳動》