css3 滾動條出現 頁面不跳動

.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）被佔用，主體內容就能夠永遠居中瀏覽器啦，從而沒有任何跳動！

 

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

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