我的 javascript 代码在 chrome 中看起来很奇怪

Question

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

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

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

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

这是执行此操作的 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);

    }

};

Answer 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)。

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

编辑：

另见此链接：http://phrogz.net/js/wheeldelta.html