Javascript 在Chrome extension弹出窗口中保存滚动位置时出现故障

我对编程比较陌生，正在开发带有弹出窗口的Chrome扩展。我想保存弹出调用之间的滚动位置。看起来我在网上找到了很多信息，但到目前为止我还没有解决我的问题。保存滚动位置几乎可以在我的扩展内工作，但我看到2个问题：

1）要在每次滚动事件中保存滚动位置，我使用：

addEventListener('scroll', function(){
   localStorage.scrollTop = document.body.scrollTop;
});

当弹出窗口打开时，我使用：

document.body.scrollTop = localStorage.scrollTop

这似乎工作正常，直到我的滚动位置超过弹出高度。Chrome扩展中可见内容的最大弹出高度为600px

document.body.style.height

也始终是大于600px的固定值。当滚动位置大于

document.body.style.height

-600px，即900px-600px时，

document.body.scrollTop

将重置为300px。即使在关闭弹出窗口之前最后一个滚动位置（

document.body.scrollTop

）为400px，当弹出窗口重新打开时，滚动位置也会重置为300px。显然，我得到了错误的滚动位置，因为正确的滚动位置值400px（例如）随后被300px覆盖

然而，这并不总是发生。有时我可以正确地保存一个滚动位置，比如500px，窗口高度900px，而其他时候我不能。我不知道为什么会有任何效果，但由于弹出窗口中的内容更高，问题似乎神奇地消失了，并保存了正确的滚动位置

在这种情况下，当滚动位置更改时，如何正确保存滚动位置？也许我做错了什么

（这看起来让人困惑。我希望能对上面的代码有所帮助。）

2）我认为这可能与上述问题有关，但我不确定。对于每个滚动事件（本文中的第一个代码块），我看到一对滚动事件被触发

如果我只是打开弹出窗口，但不滚动鼠标滚轮，我会看到事件侦听器中的代码。当第一个事件发生时，

document.body.scrollTop

被重置为“错误”值（在上面的示例中为300px）。我认为这可能是这两个问题的根本原因

---

如果鼠标滚轮被移动，事件监听器不应该启动吗？因此，如果弹出窗口被打开但鼠标滚轮未被触动，事件监听器内的代码不会执行吗？

我知道这不应该是答案，但我无法在注释中格式化代码：

我要冒险一试，建议您尝试测试一个基本假设：滚动事件是否按顺序启动？

尝试此操作，查看是否添加了一些有用的调试信息：

var scrollCounter = 0;
addEventListener('scroll', function(){
   localStorage.scrollTop = document.body.scrollTop;
   console.log({counter: scrollCounter, scrollTop: document.body.scrollTop});
   scrollCounter++
})

看看这些数字是在跳跃，还是按顺序递增

编辑：可能解决方案的p代码

我想我已经有了一个关于修复的想法，尽管我在这里使用了fix这个词

var captureSemaphore; // Use this to flag exactly when we want the `scrollTop` captured.
captureSemaphore = true; // Go into catch mode

addEventListener('scroll', function(){
   if (captureSemaphore) {
     localStorage.scrollTop = document.body.scrollTop;
    }
});

// then later, right before you open your popup
captureSemaphore = false; // Disable catch mode because the screen is about to change
openPopup();              // Open the popup

// Elsewhere

closePopup();            // Close the popup
captureSemaphore = true; // Go into catch mode

---

我知道这不应该是一个答案，但我不能在注释中格式化代码：

我要冒险一试，建议您尝试测试一个基本假设：滚动事件是否按顺序启动？

尝试此操作，查看是否添加了一些有用的调试信息：

var scrollCounter = 0;
addEventListener('scroll', function(){
   localStorage.scrollTop = document.body.scrollTop;
   console.log({counter: scrollCounter, scrollTop: document.body.scrollTop});
   scrollCounter++
})

看看这些数字是在跳跃，还是按顺序递增

编辑：可能解决方案的p代码

我想我已经有了一个关于修复的想法，尽管我在这里使用了fix这个词

var captureSemaphore; // Use this to flag exactly when we want the `scrollTop` captured.
captureSemaphore = true; // Go into catch mode

addEventListener('scroll', function(){
   if (captureSemaphore) {
     localStorage.scrollTop = document.body.scrollTop;
    }
});

// then later, right before you open your popup
captureSemaphore = false; // Disable catch mode because the screen is about to change
openPopup();              // Open the popup

// Elsewhere

closePopup();            // Close the popup
captureSemaphore = true; // Go into catch mode

---

问题实际上在相应的CSS代码中。

不可滚动，因此不允许保存大于弹出窗口可见区域的滚动位置

解决方案是添加

位置：relative和
溢出-y：自动
（
overflow-y:scroll；
也可以）属性添加到CSS元素

一旦添加了这些属性，我就可以正确地将滚动位置保存到一个对象。
问题实际上在相应的CSS代码中。
不可滚动，因此不允许保存大于弹出窗口可见区域的滚动位置

解决方案是添加
位置：relative和
溢出-y：自动
（
overflow-y:scroll；
也可以）属性添加到CSS元素

添加这些属性后，我可以将滚动位置正确保存到对象。
谢谢！我尝试添加您的建议，结果表明，只需打开弹出窗口即可触发2个事件（计数器变为1）。与以前一样，
document.body.scrollTop
仍被重置为300px。如果我打开弹出窗口并以100px的增量向下滚动，前两个都是300px，但是我在400px得到一个事件，在500px得到一个事件，以此类推，所以该部分似乎工作正常。关键似乎是要弄清楚为什么弹出窗口中内容的高度很重要——有了一定的内容高度，一切正常。啊！啊!！这给我带来了另一个想法。在
调整大小
事件上放置手表。我敢打赌，打开弹出窗口会导致
调整大小
，这反过来会影响
滚动顶部
或其他什么。是的，我认为弹出窗口正在调整大小。使用
window.onresize=resizeHandler，每次打开弹出窗口时都会调用该函数。即使我没有与弹出窗口交互，调用弹出窗口时，
resizeHandler（）
中的代码也会被调用一次。这种情况发生在内容高度表示滚动位置是否正确保存的情况下。这有助于解释发生了什么吗？即使这不是解决办法，也要感谢你给我这个伟大的学习时刻！谢谢你的建议！不幸的是，我认为这行不通。滚动事件本身会被触发两次，所以只要弹出窗口打开，添加互斥锁就没有效果。恐怕我已经尽我所能了。希望我帮助您收集的数据能为您在l