视差滚动跳跃在safari ios

Parallax scrolling jumpy in safari ios

本文关键字：safari ios 跳跃 滚动 视差      更新时间：2023-09-26

我正在研究视差功能，它在所有浏览器上都工作得很好，除了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函数
// 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;
    };
}

在用户开始滚动时启动requestAnimationFrame循环，并在最后一个滚动事件发生100毫秒后使用标志终止它。

var requesting = false;
var killRequesting = debounce(function () {
    requesting = false;
}, 100);
function onScroll() {
    if (!requesting) {
        requesting = true;
        requestAnimationFrame(parallax);
    }
    killRequesting();
}

现在在你的视差函数中检查标志，然后再调用它自己。

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);
    }
}
相关文章：