javascript - knockout.js 并修复了元素上的左滚动绑定(bind)

Question

我的这个绑定(bind)大约有 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 
                });
            });
        }

};

Answer 1

尝试使用:

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

jQuery > 1.9 将根据您使用的浏览器自动填充 vendor 前缀。 Translate3d 通常比仅设置 left 属性更好。您还必须将 parseInt($(element).css('left')) 更改为 $(element).offset().left，以便说明缺少 left css。

此外，您可以限制该函数(underscore.js 提供了一种很好的方法)以保持性能不变，即使许多事件被快速触发也是如此。如果最终看起来不稳定，您可以使用 css3 动画来弥补每次函数调用之间的准确性损失。