CSS vw讓overflow:auto頁面滾動條出現時不跳動

1、水平居中佈局與滾動條跳動的千年難題

當前web屆，絕大多數的頁面間佈局都是水平居中佈局，主體定個寬度，而後margin: 0 auto的節奏~

例如，婦女之友大淘寶的首頁：

然而，這種佈局有一個存在一個影響用戶體驗的隱患。應該都知道，現代瀏覽器滾動條默認是overflow:auto類型的，也就是若是尺寸不足一屏，沒有滾動條；超出，出現滾動條。因而，問題來了：

1. 信息流頁面，如新浪微博，是從上往下push渲染的。開始只有頭部一些信息加載，此時頁面高度有限，沒有滾動條；而後，更多內容顯示，滾動條出現，佔據可用寬度，margin: 0 auto主體元素天然會作偏移——跳動產生。
2. JS交互，原本默認頁面高度不足一屏，結果點擊了個「加載更多」，內容超過一屏，滾動條出現，頁面主體就會左側跳動。
3. 結構相似幾個頁面經過頭部的水平導航刷新切換，結果有的頁面有滾動條，有的沒有。形成的結果就是，導航尼瑪怎麼跳來跳去！

當前優化這種體驗問題，通常有兩種解決方法：

1. 高度尺寸不肯定的，例如，新浪微博，使用：

   body { overflow-y: scroll; }

2. 高度肯定的，例如淘寶網首頁。使用CSS把頁面尺寸佈局骨架搭好，再在裏面吐數據。因而，要麼沒有滾動條，要麼滾動條直接出現。不會出現跳動。
   

然而，然而，後面的策略只適合一些特殊的定製性很強的頁面。你說像知乎這樣子，高度隨內容而定的頁面，顯然就沒法駕馭；而第1種方法overflow-y: scroll，在頁面高度較小的時候，依然會保留一個醜陋的灰色的滾動欄，這其實又回到了IE當道的舊社會時代。現代瀏覽器作的那些默認視覺優化豈不是白費了，想一想就好痛心。

大師，難道就沒有一了百了、一箭雙鵰、三生有幸的方法了嗎？

阿彌陀佛，騷年，請看我手中的這盞燈……

2、CSS3計算calc和vw單位巧妙實現滾動條出現頁面不跳動

很簡單，只要一行代碼就搞定了：

.wrap-outer {
    margin-left: calc(100vw - 100%);
}

或者：

.wrap-outer {
    padding-left: calc(100vw - 100%);
}

而後就能夠慶祝放鞭炮啦！！

首先，.wrap-outer指的是居中定寬主體的父級，若是沒有，建立一個（使用主體也是能夠實現相似效果，不過本着寬度分離原則，不推薦）；
而後，calc是CSS3中的計算，IE10+瀏覽器支持，IE9瀏覽器基本支持(不能用在background-position上)；
最後，100vw相對於瀏覽器的window.innerWidth，是瀏覽器的內部寬度，注意，滾動條寬度也計算在內！而100%是可用寬度，是不含滾動條的寬度。
因而，calc(100vw - 100%)就是瀏覽器滾動條的寬度大小（若是有，若是沒有滾動條則是0）！左右都有一個滾動條寬度（或都是0）被佔用，主體內容就能夠永遠居中瀏覽器啦，從而沒有任何跳動！

您能夠狠狠地點擊這裏(IE10+)：頁面出現滾動條的時候沒有跳動demo

demo頁面中，標題和下面的妹子都是居中效果。其中，妹子作了本文所述的「滾動無跳動」處理，而標題沒有，結果，你會發現，滾動條出現與否會讓標題文字跳動，可是，妹子卻女神般巋然不動：

兼容性
支持：IE9+以及其餘現代瀏覽器。

窄屏幕寬度下的處理
上面CSS仍是有一點瑕疵的，瀏覽器寬度比較小的時候，左側留的白明顯與右邊多，說不定會顯得有點傻。此時，可能須要作點響應式處理會更好一點：

@media screen and (min-width: 1150px) {
   .wrap-outer {
       margin-left: calc(100vw - 100%);
   }
}

更新於2016年9月28日
通過一些列項目實踐，關於瀏覽器出現滾動條和消失頁面不滾動有了更加終極的解決方案，通過大型項目實踐已經驗證至關具備可行性，這裏特地分享下：

html {
  overflow-y: scroll;
}

:root {
  overflow-y: auto;
  overflow-x: hidden;
}

:root body {
  position: absolute;
}

body {
  width: 100vw;
  overflow: hidden;
}

你們隨意取走，不用謝！

3、結束語

本文參考自：Fix ‘jumping scrollbar’ issue using only CSS

說點八卦吧，本文原做者名叫Ayke van Laëthem, 纔開始寫博客，就是由於寫了這篇文章，搞掉了他1G的帶寬流量，文章至少訪問了15,000次，着實被嚇着了，仍是蠻搞的！哈哈！ 

若是你也有精彩創意且使用的前端tips, 不妨也拿出來共享下，會有不少意外的收穫與成長的。