关于请求动画帧的问题

问题描述

我正在尝试构建一个视差站点，它会在滚动站点时移动一些元素.但在阅读 Paul Irish 的这篇文章，以及 这个视频 说滚动监听器有点错误.我的问题是:

I'm trying to build a parallax site, which will move few elements while scrolling the site. But instead of using a scroll event listener I'm using requestAnimationFrame, after reading this post by Paul Irish, and this video which said that scroll listener is a bit buggy. My questions are:

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

1. It looks quite smooth in Chrome, but it's flickering badly in Firefox. Did I do something wrong here?
2. Does my code actually taking up more resources than using normal scroll event listener? I can hear my laptop fan blazing every time I'm playing with this code.

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

My file is located at http://www.socialbuzz.com.au/index.html, and please scroll to the bottom of the page to see the element that's being manipulated from javascript.

推荐答案

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

You should have a the scroll event trigger a requestAnimationFrame loop. Do not have requestAnimationFrame triggered by the scroll event itself. You should have something like a var scrolling = true; While this is happening run your requestAnimationFrame loop which references event data from the scroll event. You'll need to debounce the scroll event to turn to loop off once you are finished, it's a chore but the results are worth it. Hope this helps.

这篇关于关于请求动画帧的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！