Scroll issue when navigating between pages (follow-up)

Describe the bug

This is a follow-up to #2760, which was closed #2761. I have updated my replication case to vnext.196 which has the fix from #2761. The issue is partially fixed but now there’s an issue when using the back button.

Reproduction

1. Go to https://gavinr.github.io/sveltekit-scroll-issue/
2. Scroll down 75% on the page, click link ~400
3. Next page loads at the top (As expected! This was fixed by #2761)
4. Scroll to the BOTTOM of this page.
5. Click “Back” button in the browser
   • Expected: page loads where you just were (about 75% down with item 400 in view)
   • Actual: page loads scrolled near the TOP of the page

Logs

No response

System Info

System:
  I have tested this on multiple browsers (Firefox, Chromium) on multple OSs (Windows 10, Linux) - it happens on all of them.
Binaries:
  Node: 14.18.1 - /usr/bin/node
  npm: 8.1.1 - /usr/bin/npm
npmPackages:
  @sveltejs/adapter-static: ^1.0.0-next.21 => 1.0.0-next.21 
  @sveltejs/kit: next => 1.0.0-next.196 
  svelte: ^3.42.6 => 3.44.1

Severity

blocking an upgrade

Additional Information

Thank you for your time supporting this project!

[bluwy]

I made #2986, which hopefully will end all scrolling issues. It might be the last option we have for scrolling to work OOTB, otherwise we would be resorting to export const autoscroll = false. Feel free to try it out or give any opinions!

[f-elix]

@bluwy Hey thanks for trying!

I tried to find a solution myself for a few hours now and I am coming to the conclusion that we should keep sveltekit’s scroll restoration to this (or something along those lines):

await 0;

const deep_linked = hash && document.getElementById(hash.slice(1));

if (scroll) {
	scrollTo(scroll.x, scroll.y);
} else if (deep_linked) {
	deep_linked.scrollIntoView();
} else {
	scrollTo(0, 0);
}

This was the way scroll restoration was handled before version 193 and it is in my opinion the most efficient. It was changed to allow custom scrolling in unMount and actions, but I don’t think there is a reliable way for Sveltekit to tell if that occured or not.

With the code above, the solution for users is pretty simple: wait for the next tick, then execute the custom scrolling.

This (does not work):

const autofocus = (node) => {
	node.focus();
};

Would turn into this:

import { tick } from 'svelte';

const autofocus = async (node) => {
        await tick();
	node.focus();
};

This solution should of course be added to the docs.

I would very much like that there was a way not to impose this on the user, but at the same time it’s not that much work.

I also looked at a few other client-side routing solutions and couldn’t find one that tried to automate this. Vue router handles it by providing a special scrollBehavior function to tell the router where to scroll to, or use Vue.nextTick to run your custom scrolling code after the router. React-router just gave up on handling it (https://v5.reactrouter.com/web/guides/scroll-restoration).

I understand this would be a breaking change to revert back to, but I really think it’s worth it. After so many iterations on this, I doubt that anyone can find a reliable way to tell if scrolling occured in onMount.