Scrolling position is reset when using goto

[gurumaxi]

In my Sveltekit app I have a list of blog posts, when click on one of these the user gets to a detail page. When navigating back via the browser back button, the scrolling position of the list view is preserved. But if the user navigates back with the in-app back button, which uses goto, the scrolling position is not preserved. Is it possible to preserve the scrolling position when using goto?

[gterras]

See the noScroll option of goto: https://kit.svelte.dev/docs/modules#$app-navigation-goto

[xucian]

@gterras' solution doesn't work for me. any idea how to let sveltekit know that all my scrolling is done in a custom element?

{#if authenticated || window.location.pathname === '/'}
	<div data-vaul-drawer-wrapper class="layout-container">
		<header class="layout-header">
			<Nav {userName} {authenticated} {onLoginClicked} {onProfileClicked} {APP_NAME} />
		</header>

		<main use:preserveScroll class="layout-main scrollbar-default">
			<div class="layout-content">
				{@render children()}
			</div>
		</main>
		<ErrorHandler />
	</div>
{/if}

my 'main' element is the one that's doing the scrolling. currently, I'm using a hack use:preserveScroll, but I need to delay it and it doesn't look right:

export function preserveScroll(mainContent: HTMLElement) {
    const content = mainContent!;

	function setupListeners() {
		beforeNavigate(({ to }) => {
			const scrollTop = content.scrollTop.toString();
			const pagePathName = get(page).url.pathname;
			console.log(`beforeNavigate ${to?.url.pathname} -> ${pagePathName}, scrollTop ${scrollTop}`);
            sessionStorage.setItem(`scroll:${pagePathName}`, scrollTop);
		});

		afterNavigate(({ from, to }) => {
			const fromPathName = from?.url.pathname;
			const toPathName = to?.url.pathname;
            const scrollTopToRestore = toPathName ? sessionStorage.getItem(`scroll:${toPathName}`) : null;
            console.log(
                `afterNavigate ${fromPathName} -> ${toPathName}, scrollTopToRestore ${scrollTopToRestore}`
            );

            if (scrollTopToRestore) {
                // content.scrollTop = parseInt(scrollTopToRestore, 0);
                setTimeout(() => {
                    const parsed = parseInt(scrollTopToRestore, 0);
                    console.log(`restoring scrollTop ${parsed}`);
                    content.scrollTop = parsed;
                }, 200);
            } else {
                // Scroll to top for new pages
                content.scrollTop = 0;
            }
		});
	}

	setupListeners();

	const cleanupInterval = setInterval(() => {
		const currentPath = get(page).url.pathname;
		for (let i = 0; i < sessionStorage.length; i++) {
			const key = sessionStorage.key(i);
			if (key?.startsWith('scroll:')) {
				const path = key.slice(7);
				if (path !== currentPath) {
					sessionStorage.removeItem(key);
				}
			}
		}
	}, 60000); // Run every minute

	return {
		destroy() {
			clearInterval(cleanupInterval);
		}
	};
}