为什么随着滚动条的移动,元素会不停抖动了?
作为前端工程师,可能有些人有这样的经历,项目需要设计一个相对于显示窗口,位置不变的弹出层 (例如,弹出广告,弹出对话框,弹出登陆注册框等)。
这个时候,我们往往想到了利用“ position : absolute; left : 33px ; top : 33px ; ” 这样的一组CSS设置来实现。
但是,当你滚动浏览器的滚动条的时候,你会发现,它的位置相对于显示界面在变化,于是,你想到了用JS来 动态 设置这个弹出层的绝对定位,来达到项目的要求。
例如 : $( window).scroll (function(){
$("#test").css({top:xxx,left:xxx})
}); 之类的动态绝对定位,你想这回该好了吧!
确实,这回定位是没有问题了,但是出现了新的问题: 动态定位的弹出层随这个滚动条的上下移动,不停的抖动,稍微粗心点的人可能不会注意,但是作为前端,就是要关注细节,关注用户体验。
抖动的原因自然是随着滚动条的移动, “#test” 的位置总是在不断计算,不断的重新定位,就是快速的移动,这个移动的动作太机械,给人的感觉就是抖动了。
那有什么办法解决呢?
其实,很简单,连JS 都不用动。直接设定: #test{position: fixed; left:10%;top:20%; z-index:101 }
这样就成了,翻看 fixed 的 相关定义: 生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
而且这个属性还是跨浏览器的,IE/谷歌/火狐 全部支持它。 可以说是天生就是为弹出层而设计的,没有一丝一毫的抖动。