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通常只是設置左邊的屬性。您必須將parseInt($(element).css('left'))更改爲$(element).offset().left，以解決缺少left css的問題。

此外，您可以限制函數（underscore.js提供了一個很好的方法），以保持性能相同，即使很多事件被非常快地觸發。如果最終看起來不穩定，可以使用css3動畫來彌補每個函數調用之間的精度損失。