我想改变视口元素的背景颜色（使用overflow: scroll ）
因此，这里是我的第一次尝试： http://jsfiddle.net/2YeZG/
正如你看到的，有以前的颜色的简要闪烁的新颜色是画前。 其他人有类似的问题 。
继HTML5岩石说明 ，我试图引进requestAnimationFrame来解决这个问题无济于事：
http://jsfiddle.net/RETbF/
我在做什么错在这里？
这里是显示了同样的问题一个简单的例子： http://jsfiddle.net/HJ9ng/
提起错误含铬的位置： http://code.google.com/p/chromium/issues/detail?id=151880
如果这仅仅是背景颜色，以及你为什么不只是改变了母公司的背景色为红色，一旦滚动只是将其更改为粉红色？
我改变你的CSS到
#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/
我喜欢Manuel的解决方案。 但是，即使我没有得到什么你究竟想要做什么，我想指出的几件事情。 在你的提琴的代码，我看到你包括保罗爱尔兰的垫片为requestAnimationFrame。 但你永远不会使用它。 （这基本上是一个可靠的setTimeout，没有别的）这是基于帧的动画。）
如此以来，你只是想改变一些CSS属性，我不明白你为什么会需要它。 即使你想转换，你应该依靠CSS过渡。
除此之外，你的代码可能看起来像
dad.bind('scroll', function() {
dad.css('background-color', 'pink');
eachElemNameHere.css('background-color','randomColor');
});
同时您应不使用类似的东西，如果你能帮助它。 您应该只是添加和删除类名和你的CSS添加所有这些属性。 使得它的工作速度更快。
另外，我又不太明白，但是你可以使用jQuery的功能，从上找出每个元件的位置有更好的控制。
你的问题似乎是，你只能改变已经被滚动到视图元素的背景色。 你的代码期望浏览器等待你的代码浏览器重绘其视图前处理滚动事件。 这是最有可能不是由HTML规范提供担保。 这就是为什么它闪烁。
你应该做的，而不是为改变其将要滚动到视图中的元素。 这是因为它是所谓的电脑游戏编程相关的关闭屏幕呈现或者双缓冲 。 你建立你的场景关闭屏幕和完成现场复制到可见的帧缓冲区。
我修改了第一的jsfiddle包括滚动区域的高度事半功倍： http://jsfiddle.net/2YeZG/13/ 。
dad.bind('scroll', function() {
// new: query multiplier from input field (for demonstration only) and print message
var multiplier = +($("#multiplier")[0].value);
$("#message")[0].innerHTML=(multiplier*100)-100 + "% of screen rendering";
// your original code
var newScrollY = newScrollY = dad.scrollTop();
var isForward = newScrollY > oldScrollY;
var minVal = bSearch(bots, newScrollY, true);
// new: expand covered height by the given multiplier
// multiplier = 1 is similar to your code
// multiplier = 2 would be complete off screen rendering
var newScrollYHt = newScrollY + multiplier * dadHeight;
// your original code (continued)
var maxVal;
for (maxVal = minVal; maxVal < botsLen; maxVal++) {
var nxtTopSide = tops[maxVal];
if (nxtTopSide >= newScrollYHt) {
break;
}
}
maxVal = Math.min(maxVal, botsLen);
$(dadKids.slice(minVal, maxVal)).css('background', 'pink');
});
您的代码有1乘数，这意味着你更新这是目前可见的（滚动区域高度的100％）的元素。 如果设置了乘数2，你会得到完全关闭屏幕更新您的所有元素。 该浏览器的更新足够的元素到新的背景颜色，这样即使是100％的滚动会显示最新的元素。 由于浏览器很少滚动在一个步骤中（取决于操作系统和滚动方法的！）的面积的100％，它可能是足以减少乘法器至例如1.5（意味着50％的折扣屏幕呈现）。 在我的机器（谷歌Chrome，Mac OS X的触控板）如果乘数为1.7或以上，我不能产生任何闪烁。
顺便说一句：如果你做的东西不只是改变了背景颜色比较复杂，你不应该一次又一次地这样做。 相反，你应该检查是否元素已更新，只事后进行改变。
