视差效应 - Firefox 性能不佳答案

【问题标题】：Parallax effect - poor performance on Firefox视差效应 - Firefox 性能不佳
【发布时间】：2021-02-20 20:49:06
【问题描述】：

我正在我的网站（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>

你遇到过吗？是典型问题吗？我该如何解决？

【问题讨论】：

在选项中启用平滑滚动？
是的，被选中

标签： javascript parallax

【解决方案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);

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

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

【讨论】：