4

我正在阅读一篇关于HTML5Rocks的文章，该文章给出了一个关于滚动网页并检查 DOM 元素数组 offsetTop 以查看它们是否应该可见的示例。

文章说这样做的最佳实践方法是在每次触发滚动事件时使用窗口当前偏移量顶部更新变量。当第一个滚动事件被触发时，它会触发 requestAnimationFrame 过程来检查 DOM 元素的 offsetTop。这将可见性逻辑与滚动事件分离。

虽然我理解肯定将这两个进程解耦的好处（因为滚动事件可以每秒调用数百次），但我看不到在第一个滚动事件后每 16 毫秒运行一次可见性逻辑的好处，无论是否用户是否继续移动..

有人可以解释一下我在这里缺少的过程的哪一部分吗？

4

1 回答 1

3

我认为这在文章中解释得很好。

我们还能做什么？一方面，我们一直在运行 requestAnimationFrame，如果我们不只是滚动，那是没有必要的，因为什么都不会改变。为了解决这个问题，我们让 onScroll 启动 requestAnimationFrame

现在，每当我们滚动时，我们都会尝试调用 requestAnimationFrame，但如果已经请求了一个，我们就不会启动另一个。这是一个重要的优化，因为浏览器将堆叠所有重复的 rAF 请求，我们将回到更新调用超过我们需要的情况。

由于这个设置，我们不再需要在更新顶部调用 requestAnimationFrame，因为我们知道它只会在一个或多个滚动事件发生时被请求。我们也不再需要底部的启动电话，所以让我们相应地更新：

var latestKnownScrollY = 0,
    ticking = false;

function onScroll() {
    latestKnownScrollY = window.scrollY;
    if (!ticking) {
        requestAnimationFrame(update);
    }
    ticking = true;
}
function update() {
    ticking = false; // reset the tick so we can capture the next onScroll

    var currentScrollY = latestKnownScrollY;

    // Do visibilty logic and animation here
}

所以，“不管用户是否继续移动”并不是真的。update仅在滚动期间（或之后）调用，并且以浏览器选择的帧速率而不是每秒数百个事件的速率调用。

于 2012-11-04T10:51:29.470 回答