最近在用 Bootstrap 寫一個需要適配 WEB 和 WAP 的網站,寫完後發現 WAP 端總是會出現橫向滾動條,也就是 X 軸滾動條,導致 WAP 端頁面左右滑來滑去,很是令人蛋疼,即使設置了 overflow-x: hidden
也無法去除,通過各種途徑尋找解決方法,最終在 張鑫旭 大神的一篇文章裏找到了最終解決方法,在這裏記錄一下防止之後自己用得到時還需要重新找,也爲那些同樣有這方面問題的童鞋提供方便。
出現這種問題的主要原因就是,由於內容較多導致出現Y軸滾動條,佔用了頁面的寬度,從而導致在使用框架做自適應時出現X軸滾動條,影響用戶體驗。最終只需要在CSS中添加如下代碼就可以完美解決,以後媽媽再也不用擔心我的代碼會出現橫向滾動條了。
代碼:
html {
overflow-y: scroll;
}
:root {
overflow-y: auto;
overflow-x: hidden;
}
:root body {
position: absolute;
}
body {
width: 100vw;
overflow: hidden;
}