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

【问题标题】：How to solve element flicker while scrolling with parallax effect in JavaScript?javascript - 如何在JavaScript中使用视差效果滚动时解决元素闪烁？
【发布时间】：2012-02-18 21:06:55
【问题描述】：

我正在尝试使用 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/

【问题讨论】：

window.onscroll 很紧张，它不会为移动的每个像素触发。
我认为没有必要为每个像素触发事件（这会更重）。有什么我可以使用的选项吗？
“我怀疑触发滚动事件（太快）有问题。” 是的，你是对的。

标签： javascript animation scroll smooth

【解决方案1】：

我认为您应该改用 scrollTop() 并将背景位置更改为 fixed。问题在于，将其设置为 absolute 会使其在您向上或向下滚动时默认移动。

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

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

【讨论】：

谢谢。你救了我的命。