JavaScript Firefox慢动画

Question

为了演示目的，我提供了一些动画，其中一个div跟随实际滚动条，以便尽可能多地进行更改。

然而，动画在Chrome上运行得非常好，甚至在IE中都很好，但它在Firefox中非常滞后。

我尝试了一些像translateZ（0）等硬件加速技巧，但没有成功使用Firefox。

而不是顶部我尝试使用变换，再次，没有运气。

如果我尝试使用画布，我可以期待更好的性能吗？

＆＃13;

＆＃13;

(function () {

  var scrollerElement = document.getElementById('scroller');
  var elementToMove = document.getElementById('toMove');
  
  var scrollerSize = scrollerElement.clientHeight;
  var maxScroll = scrollerElement.scrollHeight - scrollerSize;
  
  var whileAnimate;
  var timeout;
  var delay = 200;
  
  scrollerElement.addEventListener('scroll', function (event) {
    
    clearTimeout(timeout);
    
    timeout = setTimeout(cancelAnimation, delay);
    
    if (whileAnimate) {
      return;
    }
    
    startAnimation();
    
  });
  
  function cancelAnimation() {
    whileAnimate = false;
  }
  
  function startAnimation() {
    var animationFrame;
    
    whileAnimate = true;
    
    animate();
    
    
    function animate() {
      
      if (!whileAnimate) {
        cancelAnimationFrame(animationFrame);
        return;
      }
      
      elementToMove.style.top = (scrollerElement.scrollTop / maxScroll * scrollerSize) + 'px';
      
      animationFrame = requestAnimationFrame(animate);
      
    }
  
  }

})();

＆＃13;

body {
  margin: 0;
  padding: 0;
}

#scroller {
  width: 500px;
  height: 500px;
  border: 1px solid black;
  overflow: auto;
}

#content {
  width: 500px;
  height: 20000px;
}

#toMove {
  position: absolute;
  top: 0;
  width: 20px;
  height: 20px;
  background: red;
}

＆＃13;

<div id="scroller">
  
  <div id="toMove"></div>

  <div id="content"></div>
  
</div>

＆＃13;

＆＃13;

＆＃13;