html出现滚动条页面闪动,CSS3 calc实现滚动条出现页面不跳动闪动

当HTML CSS页面内容动态加载，开始没有滚动条，内容增多后出现滚动条，这时使用固定宽度居中对齐布局会向左偏移一个滚动条宽度。解决方法可以给内容全部添加overflow-y:scroll;或者是根据内容用css填充好再补充内容。本文介绍的是css3 calc来计算滚动条宽度，当有滚动条时，内容外部也给它模拟一个滚动条宽度，因而就不会偏移了。

很简单，只要一行代码就搞定了：

.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)被占用，主体内容就可以永远居中浏览器啦，从而没有任何跳动！

您可以狠狠地点击这里(IE10+)：页面出现滚动条的时候没有跳动demo

作者：div+css

html出现滚动条页面闪动,CSS3 calc实现滚动条出现页面不跳动闪动相关推荐

CSS3干货14：自定义页面滚动条
自定义滚动条最早是 IE 玩出来的,但是后来, 不知道为什么 IE 把这个有意思的功能废弃了. 现在各大浏览器又想重新拿起来这个功能,但是显得就有点混乱了,做的最好的还是 webkit 内核的浏览器. ...
labview在2048中添加时间滚动条_Axure 教程：不可见滚动条的页面滚动效果
在设计产品原型的过程中,经常会遇到这样的一种场景--所要展示的内容,超出了当前可视页面范围.遇到这种情况,通常使用Axure动态面板的滚动条设置来解决. 产品原型设计是产品经理每日或周期性必须经历的事 ...
【CSS3】自定义滚动条样式 -webkit-scrollbar
好文推荐:http://m.blog.csdn.net/article/details?id=40398177 http://www.xuanfengge.com/css3-webkit-scroll ...
页面的div中有滚动条，js实现刷新页面后回到记录时滚动条的位置
当div中绑定数据,给它一个属性overflow-y: scroll,添加长度大小,使其能够出现滚动条:每次刷新的时候滚动条总是会出现在最上方,这使我很头疼,经过查阅网上资料,返现两种方法可行.如下: ...
html高度没有滚动条,Div扩展了页面高度，但没有滚动条
我在页面左侧有一个div用于导航链接.点击标题可展开链接的子集.我将此div设置为页面高度的100%,以便列占据页面的整个左侧.当所有子类别都展开时,会出现问题. div的内容在页面底部运行,但不添加 ...
html弹出层全覆盖滚动条,JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
一.去除滚动条方法给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加overflow:hidden属性样式中需要对IE6.7及其它浏览器用hack辨别, ...
html5+中奖结果页面,html5+css3实现抽奖活动的效果
看过我博客的知道,前几天我发过一个通过form表单来实现和用户交互效果,上次是通关过table实现用户注册页面,那么今天我们也是通过table的表单效果来画出抽奖的页面,通过css3和javascri ...
border-box和CSS3 calc()解决盒模型加边框或边距后尺寸变大的问题
border-box和CSS3 calc()解决盒模型加边框或边距后尺寸变大的问题参考文章: (1)border-box和CSS3 calc()解决盒模型加边框或边距后尺寸变大的问题 (2)http ...
css3 calc的使用
css3 calc的使用 calc()是css3新加的属性支持"+" "-" "*" "/" 使用: width: c ...

html出现滚动条页面闪动,CSS3 calc实现滚动条出现页面不跳动闪动

html出现滚动条页面闪动,CSS3 calc实现滚动条出现页面不跳动闪动相关推荐

最新文章

热门文章