使用CSS3计算calc和vw单位巧妙实现滚动条出现页面不跳动。

前端之家收集整理的这篇文章主要介绍了使用CSS3计算calc和vw单位巧妙实现滚动条出现页面不跳动。前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
                                            <table class="text"&gt;<tbody><tr class="li1"&gt;

<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

猜你在找的程序笔记相关文章