視差效應 - Firefox 性能不佳

Question

我正在我的網站（html、css、js）上構建多層視差效果。 一切都很好，但我注意到我的視差效果在 Firefox 上效果很差， 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 有幾個錯誤報告。

在我漫長的互聯網搜索解決方案的過程中，我還找到並添加了 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);

您可以通過將其粘貼到控制台來測試它。

我希望我至少能幫上一點忙。