滾動時視差網頁部分滯後

Question

我的頁面（link）在4個部分之間有視差滾動效果（第2,3,4部分滾動更快一些，每個部分與前一部分重疊）。這裏是負責視差的js代碼：

$(function() {  
    basePadTop1 = parseInt($(".section_first").css("paddingTop").split("px")[0]); 
    baseTop2 = parseInt($(".section_second").css("marginTop").split("px")[0]); 
    baseTop3 = parseInt($(".section_third").css("marginTop").split("px")[0]); 
    baseTop4 = parseInt($(".section_fourth").css("marginTop").split("px")[0]); 

    $(window).on("scroll ready", function() { 

     if($(window).width() > 1030) { 

      var actPos = $(window).scrollTop(); 
      scrPadTop1 = basePadTop1 - actPos; 
      scrTop2 = baseTop2 - actPos; 
      scrTop3 = (baseTop3 - actPos)*1.55; 
      scrTop4 = (baseTop4 - actPos)*2.25; 

      if(actPos > scrTop4) { 
       return; 
      } 

      $(".section_first").css("paddingTop", scrPadTop1 + "px"); 
      $(".section_second").css("marginTop", scrTop2 + "px"); 
      $(".section_third").css("marginTop", scrTop3 + "px"); 
      $(".section_fourth").css("marginTop", scrTop4 + "px"); 

     }   
    }); 
}); 

它的工作原理相當不錯，除了Firefox中的一個問題。

只要使用鍵盤箭頭或鼠標滾輪滾動頁面就沒有問題，但如果您慢慢地拖動滾動條，則第3和第4部分會滯後。此問題未在Chrome上顯示。

我試圖通過使scrollTop（）獨立於加速滾動來修復它，但它沒有解決問題。

任何幫助將不勝感激。

Answer 1

嘗試在你使用這個CSS類使用下面的代碼使用GPU硬件加速：

-webkit-transform: translateZ(0); 
    -moz-transform: translateZ(0); 
    -ms-transform: translateZ(0); 
    -o-transform: translateZ(0); 
    transform: translateZ(0); 

希望它可以幫助你......