CSS3 Calc实现滚动条出现页面不跳动问题

2020-05-01 10:25:42易采站长站整理

然后,calc是css3中的计算,IE10+浏览器支持,IE9浏览器基本支持(不能用在background-position上);

最后,100vw相对于浏览器的window.innerWidth,是浏览器的内部宽度,注意,滚动条宽度也计算在内!而100%是可用宽度,是不含滚动条的宽度。

于是,calc(100vw – 100%)就是浏览器滚动条的宽度大小(如果有,如果没有滚动条则是0)!左右都有一个滚动条宽度(或都是0)被占用,主体内容就可以永远居中浏览器啦,从而没有任何跳动!

总结

以上所述是小编给大家介绍的CSS3 Calc实现滚动条出现页面不跳动问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持!