引言
頁面滾動條造成寬度減小的場景很常見了，由於div塊級元素的流動性，其寬度默認為100%的body寬度，但是當容器的高度超過視口寬度時候，頁面就會出現滾動條，這個滾動條的寬度就會擠壓body的可用寬度，也就是會擠壓我們的容器的寬度，造成頁面晃動的現象，很不友好，下面就來探討下如何解決這個滾動條的問題。
滾動條的寬度是多少？
既然要解決滾動條造成的問題那么首先需要了解滾動條，即scrollbar的信息主要就是他的寬度，我們把頁面的overflow置為scroll，那么滾動條就會默認占據了空間，下面代碼就可以很容易得到其寬度了：
CSS: 先把body的間距置為0
* {
margin: 0;
padding: 0;
}
html {
overflow-y: scroll;
}
JS: 用視口的innerWidth減去body就是滾動條的寬度
console.log('chrome下滾動條的寬度', window.innerWidth - document.body.clientWidth)可以得出chrome瀏覽器下，寬度為17px，我在jsfiddle中寫的話打印出來是16px，我沒有在所有瀏覽器都去驗證，但是各瀏覽器的值可能略有不同，但都是一個固定的值。以chrome來說，就是在觸發頁面滾動條時候，會擠壓掉17px的空間，那我們就可以從不同角度考慮去解決了。
如何解決？
一、最原始的scroll方法
首先來講下最原始的方法，其思想是既然在觸發滾動條時候會擠壓空間，那么直接在沒有滾動條的時候也觸發不就可以了么，也就是我們上面算寬度時候的設置：
html {
overflow-y: scroll;
}這樣不論什么時候都有滾動寬度占據空間，不存在擠壓的問題了...但是這樣做有點蠢，畢竟在不需要滾動條的時候也有那么個丑丑的條子放在右邊。但是他的優點在於方便而且沒有兼容性的問題，其實很多大網站有時候也就這樣用了。。。
二、新屬性overlay方法
chrome下overflow有個新的屬性值overlay，這個屬性簡直就是為了這個問題而生，他和auto有點像，但是區別就是在觸發滾動條時候並不擠壓空間，說得直白點就像是移動端的懸浮滾動條，唯一的區別就是不會像手機上那樣自動出現自動消失了，滾動條會遮蓋住容器17px的空間。眼見為實用下面代碼看一下就知道。
高度還未觸發滾動條時候：
* {
margin: 0;
padding: 0;
}
html {
overflow-y: overlay;
}
.container {
height: 200px;
padding: 17px;
background-color: #00b83f;
text-align: right;
}
<div class="container">
<h1>我是容器內容</h1>
</div>效果圖如下：
然后修改容器高度，觸發滾動條：
.container {
height: 2000px;
padding: 17px;
background-color: #00b83f;
text-align: right;
}效果圖如下：
可以看到雖然出現了滾動條但是並未擠壓容器的寬度，而是遮住了17px的空間，其實本質上就相當於實現了移動端的滾動條表現。
但是非常遺憾，這個屬性值目前只有chrome支持，要是ff/ie都支持，后面也就不用寫了，但是據說以后都會加上去支持的，可以說是非常好用了，后面的方法也只是用其他方法實現這個效果而已。
三、利用vw和calc實現
因為100vw是window的寬度，其實就是window.innerWidth, 而容器的寬度100%就是除了滾動條的可用寬度，因此在沒有滾動條時候calc(100% - 100vw)就是0，觸發滾動條時候其值為負的滾動條寬度，我們將其賦值給容器的margin-right，即可巧妙補償這個寬度的擠壓，在滾動條存在的情況下容器寬度仍然占據整個視口的寬度。
* {
margin: 0;
padding: 0;
}
html {
overflow-y: auto;
overflow-x: hidden;
}
.container {
height: 2000px;
margin-right: calc(100% - 100vw);
padding: 17px;
background-color: #00b83f;
text-align: right;
}效果如同方法二，很完美，並且兼容性還不錯，起碼高版本的ie和ff都沒問題了。
四、張鑫旭大佬那里抄來的absolute方法
鏈接在此，這個利用了絕對定位，保證了body的寬度一直保持完整空間。
html {
overflow-y: scroll; //這是為了兼容ie8，不支持:root, vw
}
:root {
overflow-y: auto;
overflow-x: hidden;
}
:root body {
position: absolute;
}
body {
width: 100vw;
overflow: hidden;
}在一個普通的容器滾動條擠壓怎么辦？
上面是針對瀏覽器視口的滾動條方案，但是假如在一個普通div容器中也有如此的需求改怎么辦呢？因此此時並沒有像100vw這樣的值直接獲取容器的寬度，只能使用js的方法來檢測計算然后再用margin-right做補償，原理都是一樣的，但是我強烈不推薦也不喜歡用js來計算布局...因此在這種情況下勉強委屈下用上面的第一種方法了，如果是chrome下用第二種方法。
.wrap {
overflow-y: scroll;
overflow-y: overlay;
}當然你堅決不能忍的話也可以用js去算吧...本質也是一樣的，這里給個鏈接作為參考。
總結
方法主要就是上面的幾種，大家根據需求自由選用即可，最重要的是在使用某些新屬性的時候多加思考，很多問題的本質並沒什么區別，只是用新的工具去做而已。
參考
都在文中了