scroll restoration overhaul

.changeset/shy-taxis-drum.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+scroll restoration overhaul

packages/kit/src/runtime/client/router.js

@@ -55,12 +55,26 @@ export class Router {
 		// make it possible to reset focus
 		document.body.setAttribute('tabindex', '-1');
 
+		history.scrollRestoration = 'manual';
+
 		// keeping track of the history index in order to prevent popstate navigation events if needed
-		this.current_history_index = history.state?.['sveltekit:index'] ?? 0;
+		/** @type {number} */
+		this.current_history_index = Number(
+			sessionStorage.getItem('sveltekit:index') ?? history.state?.['sveltekit:index'] ?? 0
+		);
 
-		if (this.current_history_index === 0) {
+		if (history.state?.['sveltekit:index'] === undefined) {
 			// create initial history entry, so we can return here
-			history.replaceState({ ...history.state, 'sveltekit:index': 0 }, '', location.href);
+			history.replaceState(
+				{ ...history.state, 'sveltekit:index': this.current_history_index },
+				'',
+				location.href
+			);
+		} else if (sessionStorage.getItem('sveltekit:left_page') === 'true') {
+			// detects return to the page
+			sessionStorage.removeItem('sveltekit:left_page');
+			const scroll = this.#get_scroll_position(this.current_history_index);
+			if (scroll) scrollTo(scroll.x, scroll.y);
 		}
 
 		this.callbacks = {
@@ -72,11 +86,28 @@ export class Router {
 		};
 	}
 
-	init_listeners() {
-		if ('scrollRestoration' in history) {
-			history.scrollRestoration = 'manual';
+	#save_scroll_position() {
+		sessionStorage.setItem(
+			`sveltekit:scroll:${this.current_history_index}`,
+			JSON.stringify(scroll_state())
+		);
+	}
+
+	/**
+	 * @param {number} index
+	 * @returns {{x: number, y: number} | null}
+	 */
+	#get_scroll_position(index) {
+		if (index == undefined) return null;
+		const scroll = sessionStorage.getItem(`sveltekit:scroll:${index}`);
+		if (scroll) {
+			return JSON.parse(scroll);
+		} else {
+			return null;
 		}
+	}
 
+	init_listeners() {
 		// Adopted from Nuxt.js
 		// Reset scrollRestoration to auto when leaving page, allowing page reload
 		// and back-navigation from other pages to use the browser to restore the
@@ -96,34 +127,18 @@ export class Router {
 				e.preventDefault();
 				e.returnValue = '';
 			} else {
-				history.scrollRestoration = 'auto';
+				this.#save_scroll_position();
+				sessionStorage.setItem('sveltekit:index', String(this.current_history_index));
+				sessionStorage.setItem('sveltekit:left_page', 'true');
 			}
 		});
 
 		// Setting scrollRestoration to manual again when returning to this page.
+		// We can probably safely delete this because constructor executes when returned to the page, but we need to test this to be sure, letting it stay for now.
 		addEventListener('load', () => {
 			history.scrollRestoration = 'manual';
 		});
 
-		// There's no API to capture the scroll location right before the user
-		// hits the back/forward button, so we listen for scroll events
-
-		/** @type {NodeJS.Timeout} */
-		let scroll_timer;
-		addEventListener('scroll', () => {
-			clearTimeout(scroll_timer);
-			scroll_timer = setTimeout(() => {
-				// Store the scroll location in the history
-				// This will persist even if we navigate away from the site and come back
-				const new_state = {
-					...(history.state || {}),
-					'sveltekit:scroll': scroll_state()
-				};
-				history.replaceState(new_state, document.title, window.location.href);
-				// iOS scroll event intervals happen between 30-150ms, sometimes around 200ms
-			}, 200);
-		});
-
 		/** @param {Event} event */
 		const trigger_prefetch = (event) => {
 			const a = find_anchor(event);
@@ -190,9 +205,17 @@ export class Router {
 			// Removing the hash does a full page navigation in the browser, so make sure a hash is present
 			const [base, hash] = url.href.split('#');
 			if (hash !== undefined && base === location.href.split('#')[0]) {
-				// Call `pushState` to add url to history so going back works.
-				// Also make a delay, otherwise the browser default behaviour would not kick in
-				setTimeout(() => history.pushState({}, '', url.href));
+				this.#save_scroll_position();
+
+				// Call `replaceState` in timeout because this event will add pushState automatically and we need to store our own history state
+				// Timeout is being used to delay replaceState till next tick
+				setTimeout(() => {
+					history.replaceState(
+						{ ...(history.state || {}), 'sveltekit:index': ++this.current_history_index },
+						'',
+						location.href
+					);
+				});
 				const info = this.parse(url);
 				if (info) {
 					return this.renderer.update(info, [], false);
@@ -220,9 +243,11 @@ export class Router {
 				// with history.go, which means we end up back here, hence this check
 				if (event.state['sveltekit:index'] === this.current_history_index) return;
 
+				this.#save_scroll_position();
+
 				this._navigate({
 					url: new URL(location.href),
-					scroll: event.state['sveltekit:scroll'],
+					scroll: this.#get_scroll_position(event.state['sveltekit:index']),
 					keepfocus: false,
 					chain: [],
 					details: null,
@@ -385,6 +410,7 @@ export class Router {
 			});
 		}
 
+		this.#save_scroll_position();
 		accepted();
 
 		if (!this.navigating) {

packages/kit/test/apps/basics/test/test.js

@@ -214,11 +214,9 @@ test.describe('Scrolling', () => {
 		expect(page.url()).toBe(baseURL + '/anchor#last-anchor-2');
 		const scrollY = /** @type {number} */ (await page.evaluate(() => scrollY));
 		expect(scrollY).toEqual(originalScrollY);
-		// TODO: fix this. it is failing due to duplicate history entries
-		// https://github.com/sveltejs/kit/issues/3636
-		// await page.goBack();
-		// expect(page.url()).toBe(baseURL + '/anchor');
-		// expect(scrollY).toEqual(0);
+		await page.goBack();
+		expect(page.url()).toBe(baseURL + '/anchor');
+		expect(scrollY).toEqual(0);
 	});
 
 	test('url-supplied anchor is ignored with onMount() scrolling on direct page load', async ({

packages/kit/test/utils.js

@@ -127,7 +127,6 @@ export const test = base.extend({
 						setTimeout(() => {
 							reject(new Error('Timed out'));
 						}, 5000);
-
 						addEventListener('sveltekit:start', () => {
 							fulfil();
 						});