Mozilla滚动建议

Question

我需要一个粘性条可见并在某个滚动后固定。我打算使用滚动事件，然后我遇到了mozilla页面，建议使用window.requestAnimationFrame如下：

var last_known_scroll_position = 0;
var ticking = false;

function doSomething(scroll_pos) {
  // do something with the scroll position
}

window.addEventListener('scroll', function(e) {
  last_known_scroll_position = window.scrollY;
  if (!ticking) {
    window.requestAnimationFrame(function() {
      doSomething(last_known_scroll_position);
      ticking = false;
    });
  }
  ticking = true;
});

我有几个问题：

1 - 滴答作响背后的逻辑是什么？

2 - 在我看来，滴答声总是如此，因为如果声明没有返回任何内容。这将导致doSomething函数只被调用一次。我想我错了，我错过了什么？

mozilla link of scroll

Answer 1

默认浏览器行为

在每个滚动事件（1个像素或更多）上，浏览器将重新绘制布局。 （用于明显的布局目的）

性能问题

您的函数doSomething() 可能在两个触发的滚动事件之前未完成。您可以将其视为{em>堆栈的doSomething函数，因为会有比您的执行时间更多的调用。

requestAnimationFrame（）'解决方案

默认情况下，此函数在window对象中定义。它告诉浏览器在重新绘制布局之前等待执行传递的函数。

滴答作响的想法

如您所见，ticking仅在false之后doSomething()。它避免了前面提到的stack of events。它避免在函数完成之前执行另一个滚动事件的代码，并且浏览器重新绘制了布局。

结论

它为滚动添加了性能。几天前我问a question这说明了这种情况。