视差滚动跨浏览器兼容性

Question

在观看了这两部分教程之后(这里是第二部分)，我已经有了视差滚动和运行。在剪辑开始时，他使用Paul Irish的requestAnimationFrame引入了跨浏览器兼容性，这就是我无法工作的地方。他只是将代码粘贴到代码中，它可以工作，但我无法让它在除Chrome以外的任何其他浏览器中运行。虽然，当粘贴的东西是发生在图像所以我想它做的事情…

知道我做错了什么吗?一个建议是在其他代码之前移动requestAnimationFrame，但这并没有改变任何东西。我在这里建立了一个JSFiddle，所以请自己使用。任何指针都是有用的。

下面是我的代码:

    (function () {
        var lastTime = 0;
        var vendors = ['webkit', 'moz'];
        for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
            window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
            window.cancelAnimationFrame =
              window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
        }
        if (!window.requestAnimationFrame)
            window.requestAnimationFrame = function (callback, element) {
                var currTime = new Date().getTime();
                var timeToCall = Math.max(0, 16 - (currTime - lastTime));
                var id = window.setTimeout(function () { callback(currTime + timeToCall); },
                  timeToCall);
                lastTime = currTime + timeToCall;
                return id;
            };
        if (!window.cancelAnimationFrame)
            window.cancelAnimationFrame = function (id) {
                clearTimeout(id);
            };
    }());
    (function ($) {
        var $container = $(".parallax");
        var $divs = $container.find("div.parallax-background");
        var thingBeingScroll = document.body;
        var liHeight = $divs.eq(0).closest("li").height();
        var diffHeight = $divs.eq(0).height() - liHeight;
        var len = $divs.length;
        var i, div, li, offset, scroll, top, transform;
        var offsets = $divs.get().map(function (div, d) {
            return $(div).offset();
        });
        var render = function () {
            top = thingBeingScroll.scrollTop;
            for (i = 0; i < len; i++) {
                div = $divs[i];
                offset = top - offsets[i].top;
                scroll = ~~((offset / liHeight * diffHeight) * 3);
                transform = 'translate3d(0px,' + scroll + 'px,0px)';
                div.style.webkitTransform = transform;
                div.style.MozTransform = transform;
                div.style.msTransform = transform;
                div.style.OTransform = transform;
                div.style.transform = transform;
            }
        };
        (function loop() {
            requestAnimationFrame(loop);
            render();
        })();
    })(jQuery);

Answer 1

除了jQuery没有被加载到jsFiddle正确，我认为你的问题是与scrollTop支持。试试这个更新的，它使用jquery的shim来代替scrollTop和window属性;

            var $thingBeingScroll = $(window);

和

            top = $thingBeingScroll.scrollTop();

但现在看来，你有同样的问题，我目前有。也就是说，与Chrome相比，IE和FF上的滚动条是跳跃的。

这就好像平滑滚动FF和IE (chrome没有)在我们有机会更新它之前不知何故移动了滚动的背景板。它还发出一个滚动条更改数组，这意味着在你放开滚动条之后，它必须重新绘制位置，从开始的位置开始，并以自己的方式返回到当前位置。我相信这就是导致抖动的原因。

我相信requestAnimationFrame会堆积请求，所以如果我们有一个最近的请求和/或使用更高分辨率的更新，如mousemove，我们可能需要取消任何以前未完成的请求。