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

我正在我的网站上建立多层视差效果(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>

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

转载请注明出处:http://www.souyuntu.com/article/20230526/1935109.html

➤