更改css上滚动事件w / requestAnimation帧 [英] change css on scroll event w/ requestAnimation Frame

问题描述

我想更改视口元素的背景颜色（使用 overflow：scroll ）

这是我的第一次尝试：
http://jsfiddle.net/2YeZG/

正如你所看到的，在绘制新颜色之前，先前的颜色有一个短暂的闪烁。其他人已类似问题。

http://www.html5rocks.com/en/tutorials/speed/animations/#an-examplerel =nofollow> HTML5 rock说明，我尝试引入 requestAnimationFrame 无法解决此问题：

http://jsfiddle.net/RETbF/

我在这里做错了什么？

---

这里是一个更简单的例子，显示同样的问题： http：// jsfiddle。 net / HJ9ng /

---

此处提供Chromium的错误： http://code.google.com/p/chromium/issues/detail?id=151880

解决方案

如果它只是背景颜色，为什么不只是将父背景颜色更改为红色，一旦它滚动

 更改为
 #dad 
 {
 overflow-y：scroll; 
 overflow-x：hidden; 
 width：100px; 
 height：600px; 
 background-color：red; 
} 
  

我删除了一些Jquery并将其更改为

  dad.bind（'scroll'，function（）{
 dad.css（'background-color'，'pink'） ; 
}）; 
  

我删除此行

  iChild.css（'backgroundColor'，'red'）; 
  

但是红色是重要的，不能肯定工作 http://jsfiddle.net/2YeZG/5/

I want to change the background color of in-viewport elements (using overflow: scroll)

So here was my first attempt: http://jsfiddle.net/2YeZG/

As you see, there is a brief flicker of the previous color before the new color is painted. Others have had similar problems.

Following the HTML5 rocks instructions, I tried to introduce requestAnimationFrame to fix this problem to no avail:

http://jsfiddle.net/RETbF/

What am I doing wrong here?

---

Here is a simpler example showing the same problem: http://jsfiddle.net/HJ9ng/

---

Filed bug with Chromium here: http://code.google.com/p/chromium/issues/detail?id=151880

解决方案

if it is only the background color, well why don't you just change the parent background color to red and once it scroll just change it to pink?

I change your CSS to that

#dad
{
    overflow-y: scroll;
    overflow-x: hidden;
    width: 100px;
    height: 600px;
    background-color:red;
}​

I remove some of you Jquery and change it to this

dad.bind('scroll', function() {
    dad.css('background-color', 'pink');
});

And I remove this line

iChild.css('backgroundColor', 'red');

But is the Red color it is important that won't work for sure http://jsfiddle.net/2YeZG/5/

这篇关于更改css上滚动事件w / requestAnimation帧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！