0

我在 React Js 中制作了一个网页，其中一个部分包含大量图像，导致滚动运行 1 fps，这使得用户体验非常糟糕。

滚动在 safari 和 chrome 上都很好用，所以我不明白为什么 Firefox 这么慢？似乎 Firefox 通常不擅长一次渲染大量图像。我使用此解决方案中的此代码跨浏览器 JavaScript（不是 jQuery ...）滚动到顶部动画

css

margin: 20px 10px 0 10px;
width: 30%;
min-width: 300px;
background: #FFFFFF;
border-radius: 4px;
-webkit-box-shadow: 0px 5px 15px 0px rgba(70, 71, 76, 0.07);
box-shadow: 0px 5px 15px 0px rgba(70, 71, 76, 0.07);
overflow: hidden;

您可以在下面看到 HTML 已呈现。

在此处输入图像描述

正在使用的滚动功能在许多其他页面上使用，它工作正常。如果我删除员工的节点，滚动功能效果很好。有人暗示为什么 Firefox 如此滞后而 safari 和 chrome 运行良好？

滚动功能

scrollTo(position) {
    let scrollY = window.scrollY || document.documentElement.scrollTop,
        scrollTargetY = position() || 0,
        speed = 2000,
        easing = 'easeInOutSine',
        currentTime = 0

    // min time .1, max time .8 seconds
    let time = Math.max(.1, Math.min(Math.abs(scrollY - scrollTargetY) / speed, .8))

    // easing equations from https://github.com/danro/easing-js/blob/master/easing.js
    let easingEquations = {
        easeOutSine: function (pos) {
        return Math.sin(pos * (Math.PI / 2));
        },
        easeInOutSine: function (pos) {
        return (-0.5 * (Math.cos(Math.PI * pos) - 1));
        },
    }

    // add animation loop
    function tick() {
      currentTime += 1 / 60;

      let p = currentTime / time;
      let t = easingEquations[easing](p);

      if (p < 1) {
        requestAnimationFrame(tick);
        window.scrollTo(0, scrollY + ((scrollTargetY - scrollY) * t));
      } else {
        window.scrollTo(0, scrollTargetY);
      }
    }

    // call it once to get started
    tick()
    }
4

0 回答 0