当 document.hidden 为 true 时，不会在 Chrome 中触发滚动事件。任何解决方法？

Question

尽管页面实际上在滚动，但当页面隐藏时，Chrome 永远不会触发滚动事件。这看起来像是他们为减少不可见页面的 CPU 和网络使用而实施的。

有没有办法解决这种行为，即使使用 Chrome 的标志或扩展程序？我需要触发“滚动”事件，因为这就是我正在测试的。

setInterval(() => {
    window.scrollBy(0, 100);
    // scrolls indefinitely even when the page is hidden
}, 1000);

addEventListener("scroll", () => {
    console.log("scroll " + document.documentElement.scrollTop);
    // however, this gets fired only if document.hidden is false
});

Answer 1

这实际上是符合规范的。

滚动事件将作为更新事件循环的渲染步骤的一部分而被触发。此更新渲染可以按照步骤 2 到 5 进行快捷操作，其中当浏览器认为渲染无用时（例如，当文档被隐藏时），浏览器可以自由地丢弃它。

因此，即使滚动确实发生了，由于渲染尚未发生，因此没有要触发的事件。

注意：在 Firefox 中，添加调用requestAnimationFrame将强制事件触发几秒钟，但很快它们就会显示 Chrome 的行为，即限制所有rAF调用，直到文档再次可见。

要解决此问题取决于您的具体情况。

如果您像示例中那样控制滚动的来源，那么自己触发它就非常简单，甚至不需要事件。

setInterval(() => {
  window.scrollBy(0, 100);
  console.log("scroll " + document.documentElement.scrollTop);
}, 1000);

:root { height: 100000vh }

如果您不对该原始 负责setInterval，但知道其频率，您也可以并行启动自己的间隔：

setInterval(() => {
  window.scrollBy(0, 100);
}, 1000);
setInterval(() => {
  console.log("scroll " + document.documentElement.scrollTop);
}, 1000);

:root { height: 100000vh }

如果您不确定它是如何触发的，您可以覆盖所有滚动方法和设置器，以便它们也执行您的回调。

{
  // here we overwrite only scrollBy
  const orig = window.scrollBy;
  window.scrollBy = function(...args) {
    orig.call(this, ...args);
    console.log("scroll " + document.documentElement.scrollTop); 
  };
}

setInterval(() => {
  window.scrollBy(0, 100);
}, 1000);

:root { height: 100000vh }

如果您仍然需要确定用户滚动是否确实发生，您可以通过仅在 true 时调用回调来缓和所有这些解决方法document.hidden，并让scroll事件处理其他事件。

PS：如果您担心平滑滚动，请注意，当文档隐藏时，浏览器不会更新平滑滚动位置。