有关请求动画帧的问题

Question

我正在尝试构建一个视差网站，在滚动网站时会移动少量元素。 但是，在阅读this post by Paul Irish和this video之后我没有使用滚动事件监听器，而是使用requestAnimationFrame，而滚动监听器有点错误。我的问题是：

1. 在Chrome中看起来非常流畅，但它在Firefox中闪烁不定。我在这里做错了吗？
2. 我的代码实际上是否占用了比使用普通滚动事件监听器更多的资源？每当我玩这个代码时，我都能听到我的笔记本电脑风扇炽热。

我的文件位于http://www.socialbuzz.com.au/index.html，请滚动到页面底部以查看正在通过javascript操作的元素。

Answer 1

你应该有一个scroll事件触发一个requestAnimationFrame循环。没有由scroll事件本身触发的requestAnimationFrame。你应该有类似var scrolling = true的东西;发生这种情况时，请运行requestAnimationFrame循环，该循环引用scroll事件中的事件数据。你需要去掉滚动事件，一旦你完成就转向循环，这是一件苦差事，但结果是值得的。希望这可以帮助。

Answer 2

你不执行动画;也就是说，您没有在没有用户交互的情况下连续修改图形 。当用户滚动时，您对该页面的操作仅发生 ，并且在用户停止滚动后不会继续。因此，使用requestAnimationFrame没有任何好处，您应该坚持使用简单的事件处理程序。

requestAnimationFrame的目的是为连续动画提供最佳行为;这里没有任何优势适用。如你所知，循环内部没有任何作用的循环requestAnimationFrame是完全合适的，如果循环的每一步都以某种方式更新图形，但是由于这里没有任何变化，当用户不滚动时，循环只是浪费CPU时间。

追赶动画应该在一个requestAnimationFrame循环中完成，该循环是从滚动事件处理程序启动的，并且该循环应该在追赶完成时停止。

Answer 3

我有类似的经历，经过多次使用鼠标移动监听器和setInterval以增加动画步骤的频率，我回到了使用onscroll并在FF10上找到它和FF 15它运作良好。

也许我的要求与你的要求不一样 - 它是一个跟踪滚动条的元素，所以onscroll是改变盒子位置的提示。它落后于FF并且在FF上生涩，但在WebKit和IE上运行良好。我发现onscroll并没有像在Chrome / IE上那样经常在FF上激活。

当我最初尝试这个时，它将在FF 5或6上。使用鼠标移动监听器或频繁的间隔，我能够增加我的句柄滚动功能被调用的频率 - 但这实际上具有使定位显得更加笨拙的效果。现在使用onscroll似乎在10 ESR和15上为我工作，也许他们修复了一些东西。