如何在JavaScript中使用视差效果滚动时解决元素闪烁？

Question

我正在尝试使用JavaScript重新创建具有视差效果的网站.这意味着我有两个或更多层,在滚动时移动不同的速度.

在我的情况下,我只移动一层,另一层保持静态:第1层=网站文本; 第2层=元素背景;

为此,我使用简单的源代码(使用jQuery 1.6.4):

var docwindow = $(window);

function newpos(pos, adjust, ratio){
   return ((pos - adjust) * ratio)  + "px";
}

function move(){
   var pos = docwindow.scrollTop();
   element.css({'top' : newpos(pos, 0, 0.5)});
}

$(window).scroll(function(){
   move();
});

问题: - 所有计算都正确完成,效果"按预期"起作用.但是在某些浏览器下存在一些性能故障(Chrome MAC/Windows,Opera MAC,IE,反而不是Safari).

滚动期间我看到了什么？ - 滚动时背景与滚动一起向一个方向移动,但似乎偶尔向后跳几个像素,这会产生非常令人不安的效果(不流畅).

我尝试过的解决方案: - 添加一个计时器来限制滚动事件 - 使用短时间的.animate()方法而不是.css()方法.

我还观察到,使用.scrollTo方法(scrollTo jQuery插件)时动画很流畅.所以我怀疑触发滚动事件有点错误(太快).

你有没有观察到同样的行为？你知道吗,怎么解决？你能发布更好的解决方案吗？

感谢所有回复

编辑#1:在这里你可以找到jsfiddle演示(带定时器):http://jsfiddle.net/4h9Ye/1/

Answer 1

我认为您应该使用scrollTop()而将背景位置更改为fixed.问题是,将其设置为绝对会使您在向上或向下滚动时默认移动.

出现闪烁是因为位置作为默认浏览器滚动的一部分进行更新,并作为脚本的一部分再次更新.这将呈现两个位置而不是您想要的位置.固定后,除非你这么说,否则背景永远不会移动.

我在http://jsfiddle.net/4h9Ye/2/为您创建了一个演示.