Question

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

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

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

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

Answer 1

我认为在文章中对此进行了很好的解释。

我们还能做些什么？好吧，有一件事我们一直在运行   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
}

所以，＆＃34; 无论用户是否继续移动＆＃34;事实并非如此。 update仅在滚动期间（或稍后）调用，并以浏览器选择的帧速率而不是每秒数百个事件的速率调用。

DOM元素可见性和requestAnimationFrame

1 个答案: