1

谁能帮我找出为什么这个页面在 FireFox 和 safari 中看起来不错，但在 Chrome 和 IE 中看起来它几乎没有烦人的跳帧。

我正在使用延迟为 0 的动画来根据滚动向上或向下移动 <sections>，所以看起来一个部分吃掉了前一个部分是一种视差，但不仅是背景，而且是整个部分。

http://bksn.mx/tequilaarsenal/public/index/arsenal

我的 javascript 代码注释是西班牙语，但如果需要，我会很乐意翻译任何内容。

这是执行此操作的 JavaScript 代码的简短示例

tempScrollTop=0;
$(window).scroll(function(e) {

    windowTop = $(window).scrollTop(); 

    scrollDiff = tempScrollTop-windowTop;

    $("#sectionToMove").parallaxMio(p0,scrollDiff);
    tempScrollTop = windowTop;

});


$.fn.parallaxMio = function(pInicial,scrollDiff){
    if (scrollDiff < 0 ){
        //scroll down
        $(this).stop().animate({ top: '+='+scrollDiff }, 0);
    else if (scrollDiff > 0){
        //scroll up
        $(this).stop().animate({ top: '+='+scrollDiff }, 0);

    }

};
4

1 回答 1

1

你可以使用这样的东西：

$(window).scroll(function(evt) {
    var e = window.event || evt
    var scrollDiff = e.detail?e.detail*(-120):e.wheelDelta;
    $("#sectionToMove").parallaxMio(p0,scrollDiff);
});

e.wheelDelta存在于 FF 中，而存在于e.detail其余部分中，并告诉您滚动的方向和数量。也是e.wheelDelta大部分时间e.detail * (-120)。

PS 作为一个建议，尝试声明你的私有变量（scrollDiff例如），因为你会“污染”你的全局空间，并且有一刻会想知道“为什么这个变量存在于窗口中”，以及“为什么我的函数使用相同的变量名不能正常工作”。

编辑：

另请参阅此链接： http: //phrogz.net/js/wheeldelta.html

于 2012-12-18T04:11:46.220 回答