7

我正在尝试构建一个视差站点，它会在滚动站点时移动一些元素。但是，在阅读了 Paul Irish 的这篇文章之后，我没有使用滚动事件侦听器，而这段视频说滚动侦听器有点错误。我的问题是：requestAnimationFrame

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

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

4

3 回答 3

6

您应该有一个滚动事件触发 requestAnimationFrame 循环。滚动事件本身不会触发 requestAnimationFrame。你应该有类似 var scrolling = true; 的东西。发生这种情况时，请运行您的 requestAnimationFrame 循环，该循环引用来自滚动事件的事件数据。完成后，您需要对滚动事件进行去抖动以关闭循环，这是一件苦差事，但结果是值得的。希望这可以帮助。

于 2012-05-16T02:37:29.123 回答
3

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

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

应该使用的一个示例requestAnimationFrame是，如果您的元素故意落后于滚动并在片刻后赶上。追赶动画应该在requestAnimationFrame从滚动事件处理程序开始的循环中完成，并且当追赶完成时，该循环应该自行停止。

于 2012-05-15T14:45:37.633 回答
2

我有过类似的经历，在玩了很多鼠标移动侦听器并setInterval增加动画步骤的频率之后，我又回到只是使用onscroll并发现在 FF10 和 FF 15 上它工作得很好。

也许我的要求和你的不一样——它是一个跟踪滚动条的元素，所以 onscroll 是改变盒子位置的提示。它落后并且在 FF 上很生涩，但在 WebKit 和 IE 上运行良好。我发现它onscroll在 FF 上的触发频率不如在 Chrome/IE 上那样频繁。

当我最初尝试这个时，它会在 FF 5 或 6 上。使用鼠标移动侦听器或频繁间隔，我能够增加调用手柄滚动功能的频率 - 但这实际上具有使定位看起来更不稳定的效果。现在在 10 ESR 和 15 上使用 onscroll 似乎对我有用，也许他们修复了一些问题。

于 2012-09-12T09:52:45.237 回答