2

約60行以上続くこのバインディングがあります。左にスクロールすると、ラグが遅くてびくびくします。とにかくこれを修正するか、よりスムーズにしますか？

<!-- ko foreach: Times -->
                    <tr class="time-games">
                        <td class="time-container" data-bind="fixedLeft: { }">
                            <div class="time">
                            </div>

    ko.bindingHandlers.fixedLeft = {
        init: function(element, valueAccessor) {

            var leftOffset = parseInt($(element).css('left'));

            $(window).scroll(function () {
                $(element).css({
                    'left': $(this).scrollLeft() + leftOffset 
                });
            });
        }

};
4

1 に答える 1

1

使用してみてください：

$(element).css({
    transform: "translate3d(" + ($(this).scrollLeft() + leftOffset) + "px,0,0)"
});

jQuery > 1.9 では、使用しているブラウザーに応じてベンダー プレフィックスが自動入力されます。Translate3d は通常、 left プロパティを設定するだけよりもパフォーマンスが優れています。cssがないことを考慮して、 to もparseInt($(element).css('left'))変更する必要があります。$(element).offset().leftleft

さらに、多くのイベントが非常に迅速に起動された場合でもパフォーマンスを同じに保つために、関数を調整することができます (underscore.js はこれを行う良い方法を提供します)。css3 アニメーションを使用して、各関数呼び出し間の精度の低下を補うことができます。

于 2013-07-27T02:33:59.163 に答える