Javascript safari ios中的视差滚动跳跃

我正在开发视差功能，它在除safari之外的所有浏览器上都运行良好

我一直在关注我可能做错了什么，我认为我的javascript写错了，因为我直接绑定到一个滚动事件

这可能是一个愚蠢的问题，但在不绑定滚动事件的情况下，如何开始视差滚动事件呢。我希望图像在用户滚动时以不同的速度以不同的方向移动

我的JS

function onScroll() {

    window.requestAnimationFrame(parallax);
    function parallax(){
        var prlx_effect_1= +(window.pageYOffset *.55).toFixed(2); // .55 for slow | .7 good for fast
        var prlx_str_1 = "translate3d(0, "+prlx_effect_1+"px, 0)";
        jQ('.prlx-1').css({
            "transform":prlx_str_1,
            "-ms-transform":prlx_str_1,
            "-webkit-transform":prlx_str_1
        });

        var prlx_effect_2= -(window.pageYOffset *.25 ).toFixed(2); // .2 for slow | .4 good for fast
        var prlx_str_2 = "translate3d(0, "+prlx_effect_2+"px, 0)";
        jQ('.prlx-2').css({
            "transform":prlx_str_2,
            "-ms-transform":prlx_str_2,
            "-webkit-transform":prlx_str_2
        });
        window.requestAnimationFrame(parallax);
    }
}

window.addEventListener("scroll", onScroll, false); 

---

有什么建议吗？或者可能是其他原因导致视差仅在safari上跳动？

首先，从下划线添加此去抖动功能

// debounce is taken from _underscore.js
function debounce(func, wait, immediate) {
    var timeout, args, context, timestamp, result;
    return function() {
        context = this;
        args = arguments;
        timestamp = new Date();
        var later = function() {
            var last = (new Date()) - timestamp;
            if (last < wait) {
                timeout = setTimeout(later, wait - last);
            } else {
                timeout = null;
                if (!immediate) result = func.apply(context, args);
            }
        };
        var callNow = immediate && !timeout;
        if (!timeout) {
            timeout = setTimeout(later, wait);
        }
        if (callNow) result = func.apply(context, args);
        return result;
    };
}

现在在视差函数中，在再次调用自身之前检查标志

function parallax() {
    // your parallax code
    if (requesting) {
        requestAnimationFrame(parallax);
    }
}

其次，应该始终缓存jQuery选择器

var $prlx1 = jQ('.prlx-1');
var $prlx2 = jQ('.prlx-2');
function parallax(){
    var prlx_effect_1= +(window.pageYOffset *.55).toFixed(2); // .55 for slow | .7 good for fast
    var prlx_str_1 = "translate3d(0, "+prlx_effect_1+"px, 0)";
    $prlx1.css({
        "transform":prlx_str_1,
        "-ms-transform":prlx_str_1,
        "-webkit-transform":prlx_str_1
    });

    var prlx_effect_2= -(window.pageYOffset *.25 ).toFixed(2); // .2 for slow | .4 good for fast
    var prlx_str_2 = "translate3d(0, "+prlx_effect_2+"px, 0)";
    $prlx2.css({
        "transform":prlx_str_2,
        "-ms-transform":prlx_str_2,
        "-webkit-transform":prlx_str_2
    });
    if (requesting) {
        window.requestAnimationFrame(parallax);
    }
}

---

我可能会重新考虑绑定到scroll事件。文章中写道：“不要直接绑定到scroll事件。使用一个间隔来更新元素位置。scroll每秒被称为bajillion次，可能会导致疯狂的性能问题。”以及“一些浏览器，特别是我注意到的Safari，在滚动元素（而不是主体）上确实会受到性能影响。”也许去掉onScroll（），保留parallax（），只需调用window.requestAnimationFrame（parallax）；只是一个想法……谢谢你，现在效果好多了。当你向下拖动滚动条时，它仍然有点跳跃，但使用鼠标滚动时会更加平滑。使用

window.addEventListener（“滚动”，onScroll，false）启动视差效果正确吗我从我在问题中引用的代码中看到，他们说：不要直接绑定到scroll事件我认为我们没有像你的文章所建议的那样直接绑定到scroll事件。但我不知道为什么他们建议使用requestAnimationFrame，然后建议使用setInterval。我猜你不需要两者兼而有之。
var $prlx1 = jQ('.prlx-1');
var $prlx2 = jQ('.prlx-2');
function parallax(){
    var prlx_effect_1= +(window.pageYOffset *.55).toFixed(2); // .55 for slow | .7 good for fast
    var prlx_str_1 = "translate3d(0, "+prlx_effect_1+"px, 0)";
    $prlx1.css({
        "transform":prlx_str_1,
        "-ms-transform":prlx_str_1,
        "-webkit-transform":prlx_str_1
    });

    var prlx_effect_2= -(window.pageYOffset *.25 ).toFixed(2); // .2 for slow | .4 good for fast
    var prlx_str_2 = "translate3d(0, "+prlx_effect_2+"px, 0)";
    $prlx2.css({
        "transform":prlx_str_2,
        "-ms-transform":prlx_str_2,
        "-webkit-transform":prlx_str_2
    });
    if (requesting) {
        window.requestAnimationFrame(parallax);
    }
}