在滚动条出现、消失之际页面会出现晃动,观感不佳
基础解决方案
添加以下
|
|
或则
|
|
代码解释
-
.wrap-outer
指的是居中定宽主体的父级,如果没有,创建一个(使用主体也是可以实现类似效果,不过本着宽度分离原则,不推荐) -
calc
是 CSS3 中的计算方法 -
100vw 相对于浏览器的window.innerWidth,是浏览器的内部宽度,滚动条的宽度也计算在内,而100%则是可用宽度,是不含滚动条的宽度
-
于是,cala(100vw-100%) 就是浏览器滚动条的宽度大小(如果没有滚动条则是0),左右都有一个滚动条宽度(或都是0)被占用,主体内容就可以永远居中浏览器。
终极解决方案
大型项目实践已经验证相当具有可行性,放置于全局 CSS 中
|
|
效果展示
本站已应用 最终解决方案
可通过快速切换本博客的 Projects 页面与 About 页面感受