一、情景描述

開發者小蔣按照1920*1080的分辨率進行開發，他寫的所有元素的寬度都沒有超過1920，但是卻出現橫向滾動條，小蔣百思不得其解，最終求教程序員大尤。

可能的問題原因：

任務欄左置，實際橫向寬度只有1918

瀏覽器的豎向滾動條占了20px，橫向寬度實際只有1900

二、解決辦法

問題1：任務欄左置，實際橫向寬度只有1918

當任務欄居左時，橫向只有1918px。

2px被操作系統拿去做側邊欄感應了。

所以少了2px。

實踐解決

右鍵—>任務欄設置-----> 調整至底部

問題2：瀏覽器的豎向滾動條占了20px，橫向寬度實際只有1900

當容器的高度超過視口寬度時候，頁面就會出現滾動條，這個滾動條的寬度就會擠壓body的可用寬度，也就是會擠壓我們的容器的寬度，造成頁面晃動的現象。

不同瀏覽器滾動條占據的寬度并不相同。

可以通過，窗口的寬度 - body的寬度計算出 滾動條寬度：

console.log('chrome下滾動條的寬度', window.innerWidth - document.body.clientWidth)

運行效果如下：

各位可以自己去試試，看看你的瀏覽器滾動的寬度是不是17px

解決辦法：

暴力法（overflow:hidden)

利用vw和calc實現

利用absolute實現

2.1 暴力法（overflow:hidden)

// width: 100vw 會占據視窗的全部寬度 // 超出的部分直接隱藏掉 #app {width: 100vw;overflow: hidden; }

這樣永遠也不會出現橫向滾動條，但是一點，用戶如果開個小窗口瀏覽網頁，那么它的頁面會丟失很多內容，而且無法橫線滾動。

所以這種方法并不好。

2.2 利用vw和calc實現

既然瀏覽器滾動條會占17px，那么提前把空間占住不就可以了。

100vw是window的寬度，而容器的寬度100%就是除了滾動條的可用寬度，因此在沒有滾動條時候calc(100% - 100vw)就是0，觸發滾動條時候其值為負的滾動條寬度，我們將其賦值給容器的margin-right，即可巧妙補償這個寬度的擠壓，在滾動條存在的情況下容器寬度仍然占據整個視口的寬度。

同時必須得設置overflow-x: hidden; 把margin-right導致的超出部分給隱藏起來。

這種實現和方法1.1有同樣的問題。用戶如果開個小窗口瀏覽網頁，那么它的頁面會丟失很多內容，而且無法橫線滾動。

2.3 利用absolute實現

關于瀏覽器出現滾動條和消失頁面不滾動有了更加終極的解決方案，經過大型項目實踐已經驗證相當具有可行性，這里特意分享下：

參考自：[張鑫旭的博客](https://www.zhangxinxu.com/wordpress/2015/01/css-page-scrollbar-toggle-center-no-jumping/

html {overflow-y: scroll; }:root {overflow-y: auto;overflow-x: hidden; }:root body {position: absolute; }body {width: 100vw;overflow: hidden; }

這個方法同樣會有上面的問題。只能說世界上沒有完美的方法吧。或多或少都有點瑕疵。

如果你有更好的方法，請不吝賜教，在評論區發表你的觀點。

參考文章：

https://segmentfault.com/a/1190000017044563 https://www.zhangxinxu.com/wordpress/2015/01/css-page-scrollbar-toggle-center-no-jumping/

總結

以上是生活随笔為你收集整理的干死该死的横向滚动条的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。