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%);   } }