Svelte页面滚动位置留存问题：返回页面无法恢复滚动位置

你的问题出在滚动位置仅存在内存中的Store里，页面跳转后Store重新初始化会回到初始值0。要解决这个问题，需要把滚动位置持久化到本地存储（localStorage），让页面返回时能读取之前保存的位置。

方案1：全局滚动位置持久化（适合单页面应用） #

修改你的scrollPosition.ts，让Store从localStorage读取初始值，并实时同步更新到localStorage：

// scrollPosition.ts
import { writable } from 'svelte/store';

// 从localStorage读取之前保存的滚动位置，没有则用0
const initialY = typeof window !== 'undefined' 
  ? parseInt(localStorage.getItem('scrollY') || '0', 10) 
  : 0;

export const y = writable(initialY);

// 订阅Store变化，实时保存到localStorage
if (typeof window !== 'undefined') {
  y.subscribe((scrollY) => {
    localStorage.setItem('scrollY', scrollY.toString());
  });
}

组件代码保持原有逻辑即可：

<script lang="ts">
import { y } from '$lib/stores'
import { onMount } from 'svelte'

onMount(() => {
  window.scrollTo(0, $y)
})
</script>

<svelte:window bind:scrollY={$y} />

方案2：按页面单独保存滚动位置（适合多页面应用/SvelteKit） #

如果你的应用有多个页面，全局方案会导致不同页面共享滚动位置，此时可以按页面路径单独保存：

1. 创建页面级滚动位置Store #

// scrollPositions.ts
import { writable } from 'svelte/store';

// 读取本地存储的所有页面滚动位置
const getStoredPositions = () => {
  if (typeof window === 'undefined') return {};
  const stored = localStorage.getItem('pageScrollPositions');
  return stored ? JSON.parse(stored) : {};
};

const initialPositions = getStoredPositions();
export const scrollPositions = writable(initialPositions);

// 实时同步到localStorage
if (typeof window !== 'undefined') {
  scrollPositions.subscribe((positions) => {
    localStorage.setItem('pageScrollPositions', JSON.stringify(positions));
  });
}

2. 在页面组件中使用 #

<script lang="ts">
import { scrollPositions } from '$lib/stores';
import { page } from '$app/stores'; // SvelteKit内置页面信息Store
import { onMount, onDestroy } from 'svelte';

let currentPath = '';

// 保存当前页面的滚动位置
const saveScroll = () => {
  scrollPositions.update(positions => ({
    ...positions,
    [currentPath]: window.scrollY
  }));
};

onMount(() => {
  currentPath = $page.url.pathname;
  // 滚动到当前页面之前保存的位置
  const savedY = $scrollPositions[currentPath] || 0;
  window.scrollTo(0, savedY);

  // 监听滚动事件，实时保存
  window.addEventListener('scroll', saveScroll);
});

// 页面卸载时最后保存一次
onDestroy(() => {
  saveScroll();
  window.removeEventListener('scroll', saveScroll);
});
</script>

关键说明 #

• 加入typeof window !== 'undefined'判断是为了兼容服务器端渲染（SSR），避免在Node环境中访问localStorage报错。
• 实时监听滚动事件保存位置，比仅在页面卸载时保存更可靠，能覆盖用户中途刷新页面的场景。

内容的提问来源于stack exchange，提问作者Chen A.