阻止因出現滾動條導致頁面抖動
阿新 • • 發佈：2019-02-12
現在大多數頁面都是採用主體內容水平居中佈局
<body>
<div></div>
</body>div{
width:1200px;
margin:0 auto;
}但是，這種佈局存在一個問題。現在的瀏覽器滾動條預設是overflow:auto型別的，也就是說如果內容高度不足一屏，沒有滾動條；如果超出才會出現滾動條。於是，問題來了：
- 資訊流頁面，如新浪微博，是從上往下push渲染的。開始只有頭部一些資訊載入，此時頁面高度有限，沒有滾動條；然後，更多內容顯示，滾動條出現，佔據可用寬度，
margin: 0 auto主體元素自然會做偏移——跳動產生。 - JS互動，本來預設頁面高度不足一屏，結果點選了個“載入更多”，內容超過一屏，滾動條出現，頁面主體就會左側跳動。
- 結構類似幾個頁面通過頭部的水平導航重新整理切換，結果有的頁面有滾動條，有的沒有。造成的結果就是，導航怎麼跳來跳去！
現在有以下三種方法解決這一問題：
1、讓瀏覽器的垂直滾動條一直顯示body { overflow-y: scroll; }
2、當內容高度超過一屏時，在瀏覽器左側同時加上一個滾動條寬的的padding或margin。
.wrap-outer {
margin-left: calc(100vw - 100%);
}.wrap-outer { padding-left: calc(100vw - 100%); }
注 ： 1、
.wrap-outer指的是居中定寬主體的父級。2、
calc是CSS3中的計算，IE10+瀏覽器支援，IE9瀏覽器基本支援(不能用在background-position上)；3、
100vw相對於瀏覽器的window.innerWidth，是瀏覽器的內部寬度，注意，滾動條寬度也計算在內！而100%是可用寬度，是不含滾動條的寬度。於是，
calc(100vw - 100%)就是瀏覽器滾動條的寬度大小（如果有，如果沒有滾動條則是0）！左右都有一個滾動條寬度（或都是0）被佔用，主體內容就可以永遠居中瀏覽器啦，從而沒有任何跳動！3、相容寫法
html { overflow-x: hidden; overflow-y: auto; } body { width: 100vw; overflow: hidden; padding-left: calc(100vw - 100%); }