滚动时视差网页部分滞后

我的页面（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（）独立于加速滚动来修复它，但它没有解决问题。

任何帮助将不胜感激。

来源

2015-11-03 S_Michal

尝试在你使用这个CSS类使用下面的代码使用GPU硬件加速：

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

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

来源

2015-11-03 12:32:18 Kailas

遗憾的是它并没有解决这个问题。但是，感谢这个提示，我会记住的。 –

滚动时视差网页部分滞后

回答

相关问题