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

尝试使用GPu进行硬件加速，使用以下用于此目的的css类中的代码：

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

希望它对你有所帮助......

滚动

1 个答案: