現在大多數頁面都是採用主體內容水平居中布局
但是，這種布局存在乙個問題。現在的瀏覽器滾動條預設是overflow:auto型別的，也就是說如果內容高度不足一屏，沒有滾動條；如果超出才會出現滾動條。於是，問題來了：
js互動，本來預設頁面高度不足一屏，結果點選了個「載入更多」，內容超過一屏，滾動條出現，頁面主體就會左側跳動。
結構類似幾個頁面通過頭部的水平導航重新整理切換，結果有的頁面有滾動條，有的沒有。造成的結果就是，導航怎麼跳來跳去！
現在有以下三種方法解決這一問題：
1、讓瀏覽器的垂直滾動條一直顯示：body
2、當內容高度超過一屏時，在瀏覽器左側同時加上乙個滾動條寬的的padding或margin。
.wrap-outer或
.wrap-outer注 ：
1、.wrap-outer指的是居中定寬主體的父級。
2、calc是css3中的計算，ie10+瀏覽器支援，ie9瀏覽器基本支援(不能用在background-position上)；
3、100vw相對於瀏覽器的window.innerwidth，是瀏覽器的內部寬度，注意，滾動條寬度也計算在內！而100%是可用寬度，是不含滾動條的寬度。
於是，calc(100vw - 100%)就是瀏覽器滾動條的寬度大小（如果有，如果沒有滾動條則是0）！左右都有乙個滾動條寬度（或都是0）被占用，主體內容就可以永遠居中瀏覽器啦，從而沒有任何跳動！
專案中，最終**：
解決右側出現滾動條頁面抖動問題
在頁面內容沒有佔滿螢幕時右側不會出現滾動條，當再載入內容時頁面會出現右側滾動條，頁面寬度由於是auto，整個頁面會向左移動 解決辦法 html bodycalc是css3中的計算，ie10 瀏覽器支援，ie9瀏覽器基本支援 不能用在background position上 100vw相對於瀏覽器的w...
解決滾動條載入出現的頁面抖動
原因 乙個 通常存在著多個頁面，瀏覽器預設提供的overflow auto 根據內容進行判斷是否需要滾動條，這造成每個頁面是否有右側的滾動條是不一致的，這會導致有滾動條的頁面跳轉到沒有滾動條的頁面會發生頁面抖動 實現css html 缺點 不論螢幕是否需要滾動條，滾動條都會顯示 100vw相對於瀏覽...
因滾動條出現而導致頁面晃動的解決方案
html overflow y 屬性規定是否對內容的上 下邊緣進行裁剪 如果溢位元素內容區域的話。值描述 測試visible 不裁剪內容，可能會顯示在內容框之外。測試hidden 裁剪內容 不提供滾動機制。測試scroll 裁剪內容 提供滾動機制。無溢位時滾動條顯示為灰色不可用，溢位時正常 測試au...