javascript - 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 - 在我看来，勾选总是正确的，因为 if 语句不返回任何内容。这将导致 doSomething 函数只会被调用一次。我想我错了，我错过了什么？

mozilla link of scroll

Answer 1

默认浏览器行为

在每个滚动事件(无论是 1 像素或更多)上，浏览器将重新绘制布局。 (出于明显的布局目的)

性能问题

您的函数doSomething()可能在两次触发的滚动事件之前无法完成。您可以将其视为 doSomething 函数的堆栈，因为调用的数量将超出您的执行时间可以处理的数量。

requestAnimationFrame()'解决方案

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

勾选的想法

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

结论

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