Scroll position isn't remembered when going "back" in history

[MaximilianKresse]

Describe the bug

Currently the scroll position is only be remembered when navigating "normally" through the page. There is an explicit return to prevent saving the state when using the history back button:
https://github.com/antfu/vue-router-better-scroller/blob/main/src/index.ts#L23

Why is that so?

The problem is that when using the history forward button afterwards the scroll position cannot be restored.

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.

[Kangaroux]

Spent some time debugging this. I believe the issue is that the timeline of events differs between visiting a link vs. using your browser forward/back buttons.

TL;DR: browser removes state from history stack with popstate before there's a chance to save the scroll pos

When you click a link to go from page A to B:

1. beforeResolve: better-scroller calls replaceState to store your scroll pos on page A
2. vue-router calls pushState for page B, putting page B on the top of the stack
3. afterEach: better-scroller checks the history stack for the saved scroll position, and defaults to top: 0 if it doesn't exist.

If you then press the back button to go from page B back to A:

1. popstate: Your browser fires the popstate event, removing page B's history state from the stack. We no longer have access to page B's history to save its scroll position like before
2. beforeResolve: Because page B was popped, that means A is at the top of the stack. So history.state.current is /pageA, and to.fullPath will also be /pageA (what you linked in the issue). This seems to be a hack to avoid overwriting the state, which is now page A
3. better-scroller correctly restores the scroll position in afterEach of page A

If you go forward in history it's the same situation: popstate gets triggered early and the scroll pos doesn't get saved.

I can't find a reliable way to run something before popstate fires, so I think the best workaround is to just periodically save the scroll position instead of relying on beforeResolve. That also indirectly fixes issues where the DOM updates before everything is fully resolved. For example, fetching data in router.beforeResolve will trigger vue to re-render any components before better-scroller's beforeResolve runs. If the page shrinks you won't be saving the correct scroll pos.

EDIT: When I registered a popstate listener inside better-scroller I noticed it was actually being logged after the callbacks, which is the opposite of what I saw before. This is simply because vue-router runs the callbacks inside its own popstate listener, and what you see in the logs depends on whether you register your listener before vue-router. Regardless of the log ordering, the true popstate event fires before the callbacks.