前端之家收集整理的这篇文章主要介绍了
使用CSS3计算calc和vw单位巧妙实现滚动条出现页面不跳动。,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
<table class="text"><tbody><tr class="li1">
<td class="ln"><pre class="de1">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
效果, 不过本着宽度分离原
则, 不推荐) ;
calc是CSS3中的计算, IE10+浏览器
支持, IE9浏览器基本
支持(不能用在background-position上);
100vw相对于浏览器的window.innerWidth, 是浏览器的内部宽度, 注意, 滚动条宽度也计算在内!而100%是可用宽
度, 是不含滚动条的宽度。
calc(100vw - 100%)就是浏览器滚动条的宽度大小( 如果有, 如果没有滚动条则是0) !左右都有一个滚动条宽度( 或都
是0) 被占用, 主体
内容就可以永远居中浏览器啦, 从而没有任何跳动!
兼容性:IE9+以及其他现代浏览器。
缺点:窄屏幕宽度下的处理。 浏览器宽度比较小的时候, 左侧留的白明显与右边多, 说不定会显得有点傻。 那么就在响应式的
时候进行如上处理。
http://www.zhangxinxu.com/
wordpress/2015/01/
css-page-scrollbar-toggle-center-no-jumping/ 原文链接:https://www.f2er.com/note/422035.html