在 Svelte 中保持页面的页面滚动位置

Question

我正在使用 Svelte，并尝试将滚动位置保持在单个页面上，这样当用户导航到另一个页面然后导航回来（通过浏览器或导航栏返回）时，页面会加载并保持相同的滚动位置。

我尝试使用商店和

<svelte:window>

元素来执行此操作。根据注释here我应该使用

onMount

在安装上滚动页面。这是我尝试过的：

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

export const y = writable(0)

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

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

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

我已经验证了商店已更新滚动位置，并且当组件安装时它被重置为 0。因此安装时实际上没有发生滚动。

有什么建议如何解决这个问题吗？

Answer 1

我最终以不同的方式解决了这个问题；我没有使用

<svelte:window>

将滚动绑定到商店，而是保存了滚动位置

onDestroy

并重新使用了它

onMount

。

onDestroy(() => ($y = window.scrollY))
onMount(async () => {
    await tick()
    scrollTo(0, $y)
})