あなたの問題は、すでにスクロールして表示されている要素の背景色のみを変更しているようです。コードは、ブラウザーがビューを再描画する前に、コードがスクロール イベントを処理するのを待つことを想定しています。これは、おそらく 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% スクロールしても更新された要素が表示されるように、十分な要素を新しい背景色に更新します。ブラウザが 1 ステップで領域の 100% をスクロールすることはめったにないため (オペレーティング システムとスクロール方法によって異なります)、乗数をたとえば 1.5 に減らすことで十分な場合があります (画面レンダリングが 50% オフになることを意味します)。私のマシン (Google Chrome、タッチ パッド付きの Mac OS X) では、乗数が 1.7 以上の場合、ちらつきを生成できません。
ところで: 背景色を変更するよりも複雑なことを行う場合は、何度も何度も行うべきではありません。代わりに、要素が既に更新されているかどうかを確認し、後でのみ変更を実行する必要があります。