如何解決滾動條scrollbar出現形成的頁面寬度被擠壓的問題？

引言

頁面滾動條形成寬度減少的場景很常見了，因爲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的空間，那咱們就能夠從不一樣角度考慮去解決了。

如何解決？

1、最原始的scroll方法

首先來說下最原始的方法，其思想是既然在觸發滾動條時候會擠壓空間，那麼直接在沒有滾動條的時候也觸發不就能夠了麼，也就是咱們上面算寬度時候的設置：

html {
  overflow-y: scroll;
}

這樣不論何時都有滾動寬度佔據空間，不存在擠壓的問題了...可是這樣作有點蠢，畢竟在不須要滾動條的時候也有那麼個醜醜的條子放在右邊。可是他的優勢在於方便並且沒有兼容性的問題，其實不少大網站有時候也就這樣用了。。。

2、新屬性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都支持，後面也就不用寫了，可是聽說之後都會加上去支持的，能夠說是很是好用了，後面的方法也只是用其餘方法實現這個效果而已。

3、利用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都沒問題了。

4、張鑫旭大佬那裏抄來的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去算吧...本質也是同樣的，這裏給個連接做爲參考。

總結

方法主要就是上面的幾種，你們根據需求自由選用便可，最重要的是在使用某些新屬性的時候多加思考，不少問題的本質並沒什麼區別，只是用新的工具去作而已。

參考

都在文中了