知識星球
一、水平居中佈局與捲軸跳動的千年難題
當前web屆，絕大多數的頁面間佈局都是水平居中佈局，主體定個寬度，然後margin: 0 auto的節奏~
例如，婦女之友大淘寶的首頁：
然而，這種佈局有一個存在一個影響使用者體驗的隱患。應該都知道，現代瀏覽器捲軸預設是overflow:auto型別的，也就是如果尺寸不足一屏，沒有捲軸；超出，出現捲軸。於是，問題來了：
資訊流頁面，如新浪微博，是從上往下push渲染的。開始只有頭部一些資訊載入，此時頁面高度有限，沒有捲軸；然後，更多內容顯示，捲軸出現，佔據可用寬度，margin: 0 auto主體元素自然會做偏移——跳動產生。
JS互動，本來預設頁面高度不足一屏，結果點選了個“載入更多”，內容超過一屏，捲軸出現，頁面主體就會左側跳動。
結構類似幾個頁面透過頭部的水平導航掃清切換，結果有的頁面有捲軸，有的沒有。造成的結果就是，導航尼瑪怎麼跳來跳去！
當前最佳化這種體驗問題，一般有兩種解決方法：
1.高度尺寸不確定的，例如，新浪微博，使用：
body { overflow-y: scroll; }
2.高度確定的，例如淘寶網首頁。使用CSS把頁面尺寸佈局骨架搭好，再在裡面吐資料。於是，要麼沒有捲軸，要麼捲軸直接出現。不會出現跳動。
然而，然而，後面的策略只適合一些特殊的定製性很強的頁面。你說像知乎這樣子，高度隨內容而定的頁面，顯然就無法駕馭；而第1種方法overflow-y: scroll，在頁面高度較小的時候，依然會保留一個醜陋的灰色的滾動欄，這其實又回到了IE當道的舊社會時代。現代瀏覽器做的那些預設視覺最佳化豈不是白費了，想想就好痛心。
大師，難道就沒有一了百了、兩全其美、三生有幸的方法了嗎？
阿彌陀佛，騷年，請看我手中的這盞燈……
二、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%);
}
}
三、結束語
本文參考自：Fix ‘jumping scrollbar’ issue using only CSS
原文出處：張鑫旭的部落格（@張鑫旭）