如何在 JavaScript 中以视差效果滚动时解决元素闪烁？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9006825/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to solve element flicker while scrolling with parallax effect in JavaScript?
提问by Marakoss
I am trying to re-create website with parallax effect using JavaScript. That means that I have two or more layers, that are moving different speeds while scrolling.
我正在尝试使用 JavaScript 重新创建具有视差效果的网站。这意味着我有两层或更多层，它们在滚动时以不同的速度移动。
In my case I'm moving only one layer, the other one remains static: layer 1 = website text; layer 2 = element background;
就我而言，我只移动一层，另一层保持静止：第 1 层 = 网站文本；第 2 层 = 元素背景；
for this I'm using simple source code (with jQuery 1.6.4):
为此，我使用简单的源代码（使用 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();
});
The Problem: - All calculations are done right and the effect "works" as expected. But there is some performance glitch under some browsers (Chrome MAC/Windows, Opera MAC, IE, paradoxically not Safari).
问题： - 所有计算都正确完成并且效果按预期“工作”。但是在某些浏览器（Chrome MAC/Windows、Opera MAC、IE，矛盾的是不是 Safari）下存在一些性能故障。
What do I see during scrolling? - While scrolling the background moves in one direction together with scroll, but it seems to occasionally jump few pixels back and then forth, which creates very disturbing effect (not fluid).
在滚动过程中我看到了什么？- 滚动时背景与滚动一起向一个方向移动，但它似乎偶尔会来回跳跃几个像素，这会产生非常令人不安的效果（不流畅）。
Solutions that I tried: - adding a timer to limit scroll events - using .animate() method with short duration instead of .css() method.
我尝试过的解决方案： - 添加一个计时器来限制滚动事件 - 使用持续时间短的 .animate() 方法而不是 .css() 方法。
I've also observed, that the animation is smooth when using .scrollTo method (scrollTo jQuery plugin). So I suspect that there is something wrong with firing scroll events (too fast).
我还观察到，使用 .scrollTo 方法（scrollTo jQuery 插件）时动画很流畅。所以我怀疑触发滚动事件（太快）有问题。
Have you observed the same behavior? Do you know, how to fix it? Can you post a better solution?
你有没有观察到同样的行为？你知道怎么解决吗？你能发布一个更好的解决方案吗？
Thanks for all responses
感谢所有回复
EDIT #1: Here you can find jsfiddle demonstration (with timer): http://jsfiddle.net/4h9Ye/1/
编辑 #1：在这里你可以找到 jsfiddle 演示（带计时器）：http: //jsfiddle.net/4h9Ye/1/
回答by Bruno Silva
I think you should be using scrollTop() instead and change the background position to fixed. The problem is that setting it to absolutewill make it move by default when you scroll up or down.
我认为您应该改用 scrollTop() 并将背景位置更改为fixed。问题是将其设置为绝对值会使其在向上或向下滚动时默认移动。
The flicker occurs because the position is updated as part of the default browser scroll and updated again as part of your script. This will render both positions instead of just the one you want. With fixed, the background will never move unless you tell it so.
出现闪烁是因为该位置作为默认浏览器滚动的一部分更新，并作为脚本的一部分再次更新。这将渲染两个位置，而不仅仅是您想要的位置。固定后，背景永远不会移动，除非你告诉它。
I've created a demo for you at http://jsfiddle.net/4h9Ye/2/.
我在http://jsfiddle.net/4h9Ye/2/为你创建了一个演示。
