视差滚动跨浏览器兼容性

Question

在观看了关于 (here's part two) 的这两个部分的教程后，我已经开始运行视差滚动了。在剪辑开始的地方，他使用Paul Irish's requestAnimationFrame 介绍了跨浏览器兼容性，这就是我无法开始工作的地方。他只是将代码粘贴到代码中并且它可以工作，但我无法让它在除 Chrome 之外的任何其他浏览器中运行。虽然，当粘贴图像时发生了一些事情，所以我想它会做一些事情......

知道我做错了什么吗？一个建议是将 requestAnimationFrame 移到其他代码之前，但这并没有改变任何东西。我已经建立了一个 JSFiddle here 所以请帮助自己。任何指针都有帮助。

这是我的代码：

    (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 支持。试试这个 updated fiddle，它使用 jquery shim 作为 scrollTop 和 window 属性 intead；

            var $thingBeingScroll = $(window);

和

            top = $thingBeingScroll.scrollTop();

但是现在看来您遇到了与我目前遇到的相同的问题。也就是说，与 Chrome 相比，IE 和 FF 上的滚动是跳跃的。

就好像 FF 和 IE（chrome 没有）上的平滑滚动在我们有机会更新它之前以某种方式移动了滚动上的背景板。它还发出一系列滚动更改，这意味着在您放开滚动条后，它必须从头开始重新绘制位置并返回当前位置。我相信这就是导致抽搐的原因。

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