视差效果-在Firefox上性能不佳

Question

我正在我的网站上建立多层视差效果(html，css，js)。一切都运行得很好，但我注意到我的视差效果在火狐上运行得很差，window.onscroll似乎很慢，可以说刷新率非常低。

下面是我的JS实现：

document.addEventListener('DOMContentLoaded', function() {
    const layers = document.querySelectorAll("[data-type='parallax']");

    window.addEventListener('scroll', event => {
        const topDistance = window.pageYOffset;
      window.requestAnimationFrame(function() {
        for (let i = 0; i < layers.length; ++i) {
          const depth = layers[i].getAttribute('data-depth');
          const movement = topDistance * depth;
          const translate3d = 'translate3d(0, ' + movement + 'px, 0)';
          layers[i].style.transform = translate3d;
        }
      })
    });
});

我的html代码：

<div class="parallax-banner">
    <div class="parallax-layer layer-1" data-type="parallax" data-depth="0.05"></div>
    <div class="parallax-layer layer-2" data-type="parallax" data-depth="0.2"></div>
    <div class="parallax-layer layer-3" data-type="parallax" data-depth="0.4"></div>
    <div class="parallax-layer layer-4" data-type="parallax" data-depth="0.6"></div>
    <div class="parallax-layer layer-5" data-type="parallax" data-depth="0.7"></div>
    <div class="parallax-layer layer-6" data-type="parallax" data-depth="0"></div>
</div>

你遇到过吗？这是典型的问题吗？我怎么才能修复它呢？

Answer 1

我有以下非常简单的JS实现，在后面有两层，由于抖动和滞后行为，它在Firefox中不能使用：

$(function() {
  $(window).on('scroll', function() {
    $('#background').css('background-position-y', $(window).scrollTop() * -.15);
  });
});  
$(function() {
  $(window).on('scroll', function() {
    $('#background2').css('background-position-y', $(window).scrollTop() * -.09);
  });
  });

只有CSS的替代方案对我不起作用，因为它在我的内容结束后导致背景层明显溢出。

最后，我找到了一种方法来提高桌面Firefox的性能(目前还不是在移动设备上)。我添加了

position: fixed;
background-attachment: fixed;
background-position: top;

我所有的背景层。

iOS Safari和移动Firefox仍然没有改进。从版本16开始，Firefox有几个bug报告。

在我漫长的互联网搜索解决方案的过程中，我也找到了keithclark的一个脚本，并添加了一个脚本，但我不确定这是否有什么不同，这个脚本来自2011年：

/*
Firefox super responsive scroll (c) Keith Clark - MIT Licensed
*/
(function(doc) {
console.log("Document executed")
  var root = doc.documentElement,
      scrollbarWidth, scrollEvent;

  // Not ideal, but better than UA sniffing.
  if ("MozAppearance" in root.style) {

    // determine the vertical scrollbar width
    scrollbarWidth = root.clientWidth;
    root.style.overflow = "scroll";
    scrollbarWidth -= root.clientWidth;
    root.style.overflow = "";

    // create a synthetic scroll event
    scrollEvent = doc.createEvent("UIEvent")
    scrollEvent.initEvent("scroll", true, true);

    // event dispatcher
    function scrollHandler() {
      doc.dispatchEvent(scrollEvent)
    }

    // detect mouse events in the document scrollbar track
    doc.addEventListener("mousedown", function(e) {
      if (e.clientX > root.clientWidth - scrollbarWidth) {
        doc.addEventListener("mousemove", scrollHandler, false);
        doc.addEventListener("mouseup", function() {
          doc.removeEventListener("mouseup", arguments.callee, false);
          doc.removeEventListener("mousemove", scrollHandler, false);
        }, false)
      }
    }, false)

    // override mouse wheel behaviour.
    doc.addEventListener("DOMMouseScroll", function(e) {
      // Don't disable hot key behaviours
      if (!e.ctrlKey && !e.shiftKey) {
        root.scrollTop += e.detail * 16;
        scrollHandler.call(this, e);
        e.preventDefault()
      }
    }, false)

  }
})(document);

您可以通过将其粘贴到控制台进行测试。

我希望我至少能帮上一点忙。