無法在Chrome擴展程序彈出窗口中保存滾動位置

Question

我是編程的新手，正在開發帶有彈出窗口的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）。 我認為這可能是這兩個問題的根本原因。

是否應該僅在移動鼠標滾輪時才觸發事件監聽器，因此如果打開彈出窗口但未觸摸鼠標滾輪，則事件監聽器中的代碼將不會執行？

Answer 1

問題實際上出在相應的CSS代碼中。 <div>是不可滾動的，因此不允許保存比彈出窗口的可見區域大的滾動位置。

解決的辦法是增加以下position: relative; 和overflow-y: auto; （ overflow-y: scroll;也可以）屬性添加到CSS元素。

一旦添加了這些屬性，就可以正確地將滾動位置保存到對象。

Answer 2

我知道這不應該是一個答案，但是我無法格式化注釋中的代碼：

我將不知所措，建議您嘗試測試以下基本假設之一： 滾動事件是否按順序觸發？

試試看，看看是否添加了一些有用的調試信息：

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