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

Question

我有这个绑定，大约有 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 将根据正在使用的浏览器为您自动填充供应商前缀。Translate3d 通常比仅设置 left 属性要好。您还必须更改您的parseInt($(element).css('left'))to $(element).offset().left，以解决缺少leftcss 的问题。

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