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会叠加请求，因此如果我们更新一个和/或使用更高分辨率的更新，例如{{1}，我们可能需要取消之前的任何优秀请求}。

视差滚动跨浏览器兼容性

1 个答案: