7

ビューポート内要素の背景色を変更したい ( を使用overflow: scroll)

これが私の最初の試みでした： http://jsfiddle.net/2YeZG/

ご覧のとおり、新しい色がペイントされる前に、前の色の短いちらつきがあります。他の人も同様の問題を抱えています。

HTML5 rocks instructions に従って、requestAnimationFrameこの問題を解決するために紹介しようとしましたが、役に立ちませんでした。

http://jsfiddle.net/RETbF/

ここで何が間違っていますか？

同じ問題を示す簡単な例を次に示します: http://jsfiddle.net/HJ9ng/

ここで Chromium のバグを報告: http://code.google.com/p/chromium/issues/detail?id=151880

4

3 に答える 3

1

背景色だけの場合は、親の背景色を赤に変更し、スクロールしたらピンクに変更してみませんか？

私はあなたの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/

于 2012-09-21T02:33:40.320 に答える
0

あなたの問題は、すでにスクロールして表示されている要素の背景色のみを変更しているようです。コードは、ブラウザーがビューを再描画する前に、コードがスクロール イベントを処理するのを待つことを想定しています。これは、おそらく 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 以上の場合、ちらつきを生成できません。

ところで: 背景色を変更するよりも複雑なことを行う場合は、何度も何度も行うべきではありません。代わりに、要素が既に更新されているかどうかを確認し、後でのみ変更を実行する必要があります。

于 2012-10-21T12:26:05.827 に答える
0

私はマヌエルのソリューションが好きです。しかし、あなたが何をしようとしているのか正確にはわかりませんが、いくつか指摘したいことがあります。あなたのフィドル コードでは、requestAnimationFrame に Paul Irish の Shim が含まれていることがわかりました。しかし、あなたはそれを決して使用しません。(これは基本的に信頼できる setTimeOut であり、他には何もありません) フレーム ベースのアニメーションからのものです。)

したがって、いくつかの CSS プロパティを変更したいだけなので、なぜそれが必要なのかわかりません。トランジションが必要な場合でも、CSS トランジションに依存する必要があります。

それ以外は、コードは次のようになります

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

また、できればそのようなものを使用しないのが理想的です。クラス名を追加および削除し、これらすべてのプロパティを CSS に追加するだけです。より速く動作します。

Also, again I don't quite get it, but you could use the jQuery function to find out each elements' position from the top to have better control.

于 2012-10-20T19:26:07.520 に答える