WebKit 中滚轮的生涩视差答案

【问题标题】：Jerky parallaxing with scrollwheel in WebKitWebKit 中滚轮的生涩视差
【发布时间】：2014-07-21 18:34:57
【问题描述】：

我在视差背景方面遇到了一些问题。我为我的一些朋友组织的活动创建了一个小网站，在该网站上，我有一堆在内容部分之间交替的背景图片。我添加了一些逻辑来在滚动时抵消这些背景图像，以创建视差效果。

它运行良好，我没有注意到任何性能问题，但是在使用滚轮时，WebKit 浏览器中的视差似乎落后了。

这是网站的链接：

至少对于背景图像，我尝试模仿的效果是在 Spotify 网站上看到的效果：

https://www.spotify.com/

通过查看他们的源代码，我似乎在做或多或少相同的事情：我有一个视差函数，它根据文档的scrollTop 值计算背景变换，这个函数被限制为 16 ms 并绑定到窗口的滚动事件。尽管如此，Spotify 网站上的背景转换是即时的，而我的在视觉上落后于内容。它并没有“损坏”，因为它在 Firefox/IE 中运行良好，并且在手动滑动滚动条时在 WebKit 浏览器中运行......但这真的很烦人。

有人对导致这种抽搐的原因有任何提示吗？

这是视差功能的代码（我正在使用原型，很抱歉this 垃圾邮件）：

    parallaxBackground: function () {
        var viewportTop = this.elements.$document.scrollTop();
        var viewportBottom = viewportTop + this.elements.$window.height();
        var scrollDelta = this.slideHeight + this.elements.$window.height();

        $.each( this.backgroundSlides, function ( index, slide ) {
            var slideTop = slide.$container.offset().top;
            var slideBottom = slideTop + this.slideHeight;
            if ( slideBottom < viewportTop || slideTop > viewportBottom )
                return true;
            var factor = 1 - ( slideBottom - viewportTop ) / scrollDelta;
            this.transformBackground( slide.$image, this.slideLength * ( factor - 1 ) );
        }.bind( this ) );
    },

    transformBackground: Modernizr.csstransforms ? function ( $backgroundElement, distance ) {
        $backgroundElement.css( {
            '-ms-transform': 'translate(0px, ' + distance + 'px)',
            '-webkit-transform': 'translate(0px, ' + distance + 'px)',
            'transform': 'translate(0px, ' + distance + 'px)'
        } );
    } : function ( $backgroundElement, distance ) {
        $backgroundElement.css( 'top', distance );
    }

以下是它的绑定方式（使用下划线进行节流）：

this.elements.$window.on( 'scroll',
    _.throttle( this.parallaxBackground.bind( this ), 16 ) );

【问题讨论】：

这只是一个猜测，因为我曾经遇到过类似的问题。也许当你的滚动事件触发窗口（在 webkit 中）时，并没有重新计算 jet，所以你得到了那个帧的旧值。尝试从滚动事件而不是从窗口中获取滚动量。很抱歉模糊提示，我只在 WebGL 中使用它，而不是在 CSS 动画中使用它，而且我对 jQuery 不是很熟悉。
据我所知，从滚动事件中获取 scrollTop 值的唯一方法是通过事件对象的target（或srcElement）属性访问它，例如这个：e.target.document.body.scrollTop。但是，文档节点将与用于调用 jQuery 的 scrollTop() 的节点相同，所以我不会有同样的问题吗？
你是对的，我想我把滚动和轮子事件混淆了，你在事件中有一个轮子增量值。但是查看源代码和逐步调试，我意识到调用 jQuery 的“节流”（由于某种原因发生在某处）会导致一切以 1 毫秒的超时异步发生。也许这会导致问题？
好的，我可能只是遇到了类似的问题，我通过从窗口而不是文档中获取我的值来解决它。也许它也适用于您的情况。
谢谢，我回家后会试一试，然后告诉你结果如何。

标签： javascript jquery css webkit parallax

【解决方案1】：

我最近根据 Spotify 的网站重新创建了自己的视差效果，我遇到了您在此处提到的许多问题。

虽然我无法完全摆脱 Safari 上的卡顿，但我已经设法在 Chrome 和 Firefox 上将其流畅地控制在 60fps。

我在这里将它作为 jQuery 插件发布，但您可以调整它以使用您选择的框架：

http://pixelcog.com/parallax.js/

有几个提示可以帮助我优化它：

尽可能避免triggering a layout
Don't attach a lot of logic to the scroll event directly，推迟到 setTimeout 或 requestAnimationFrame 调用 instead
在背景元素上使用position:fixed;。在稍微滞后的浏览器上，卡顿会很小。
使用null transforms 强制浏览器分层，但要谨慎使用。
探索Chrome DevTools以诊断瓶颈

这些帮助我摆脱了我在自己的实现中看到的大部分口吃。

【讨论】：