Question

我正在尝试创建一个在非活动标签中运行的Chrome扩展程序内容脚本。

我有一个无限滚动元素，我想滚动到底部。

如果该选项卡处于活动状态并且位于前台，则以下代码有效：

div.scrollTop = div.scrollHeight;

如果我在另一个标签中，则无法滚动...

chrome://flag上是否有可以解决该问题的标志？还是您还有其他建议？

Answer 1

为了帮助其他人，我通过等待（轮询）页面变得可见来解决它：

if(document.hidden) {
  while(document.hidden) await new Promise(r => setTimeout(r, 1000));
  // do scrolling stuff here
}

但对大多数人来说更好的解决方案是使用 Page Visibility API 的 visibilitychanged 事件：

document.addEventListener("visibilitychange", function() {
  if(document.hidden) {
    // tab has become inactive/hidden
  } else {
    // tab has become visible
  }
})

我还没有测试过那个代码。您显然需要在那里添加一些额外的代码，以确保它只在页面第一次可见时触发您的 tab has become visible 代码（假设这是您想要的）。

Answer 2

好的，经过长时间的研究，我终于有了结论。

当选项卡不可见（选项卡可以处于活动状态但不可见）时，chrome不执行UI计算。因此，不进行滚动计算，只能进行可见的测量。

一种解决方法是在新窗口中打开选项卡，使该选项卡可见（尽管此窗口未聚焦）并在chrome：// flags中设置“节流阀昂贵的后台计时器”以禁用

Answer 3

我在无效标签页上也遇到了类似的问题我能够通过生成滚动事件来滚动它。看到以下代码：

var evt = document.createEvent('HTMLEvents');
evt.initEvent('scroll', false, true);
scrollTarget.dispatchEvent(evt);

滚动到底部，在非活动标签中不起作用

3 个答案: