Question

I’m relatively new to programming and am working on a Chrome extension with a popup. I want to save the scroll position between popup invocations. It seems like I’ve found a lot of info on the internet, but so far I haven’t been able to solve my problem. Saving the scroll position almost works within my extension, but I’m seeing 2 issue:

1) To save the scroll position at each scroll event, I use:

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

When the popup is opened, I use:

document.body.scrollTop = localStorage.scrollTop

This seems to work fine until my scroll position exceeds the popup height. The max popup height for visible content in a Chrome extension is 600px. document.body.style.height is also always a fixed value greater than 600px. When the scroll position is greater than document.body.style.height – 600px, say 900px – 600px, document.body.scrollTop is reset to 300px. Even if the last scroll position (document.body.scrollTop) was 400px before the popup is closed, scroll position is reset to 300px when the popup is re-opened. Obviously, I get the wrong scroll position because the proper scroll position value of 400px (for example) is then overwritten by 300px.

However, it doesn’t always happen. Sometimes I can properly save a scroll position of, say 500px with a window height of 900px, and other times I can’t. I don’t know for sure why this has any effect, but as the content in the popup is taller the problem seems to magically go away and the proper scroll position is saved.

How can I properly save the scroll position when the scroll position in this situation? Perhaps I’m doing something fundamentally wrong?

(This seems confusing to read. I hope it’s possible to help with the code above.)

2) I think might be intertwined with the above issue, but I’m not sure. For every scroll event (first code block in this post), I see a pair of scroll events fired.

If I just open the popup but don’t scroll the mousewheel, I see code inside my event listener fire. When the first event happens, document.body.scrollTop is reset to the “wrong” value (300px in the example above). I think this might be the root cause of both issues.

Shouldn’t the event listener only fire if the mousewheel is moved, and thus the code inside the event listener doesn’t execute if the popup is opened but the mousewheel isn’t touched?

Answer 1

The issue was actually in the corresponding CSS code. The <div> wasn’t scrollable, and so it didn’t allow saving a scroll position bigger than the visible area of the popup.

The solution was to add the position: relative; and overflow-y: auto; (overflow-y: scroll; works as well) properties to the CSS element.

Once those properties were added, I could properly save the scroll position to an object.