history.replaceState() 在 Svelte/Sapper 中不能与 history.scrollRestoration = 'auto' 一起使用

Question

我正在使用history.replaceState() 来更新我的页面的查询参数，而不会按照this SO answer 中的建议导致页面重新加载。

function setQueryParam ({ name, value }) {
  const params = new URLSearchParams(window.location.search)

  params.set(name, value)
  history.replaceState({}, '', decodeURIComponent(`${window.location.pathname}?${params}`))
}

我还使用以下行存储用户的滚动位置：

history.scrollRestoration = 'auto'

当从一个页面导航到另一个页面时，scrollRestoration 工作正常 - 页面之间的滚动位置保持不变。但是，之后我用 setQueryParam 函数更改了查询参数，滚动恢复不再起作用。

为什么会这样？

注意：相同的代码在 Svelte/Sapper 之外也能正常工作，仅使用 HTML 和 JavaScript。

Answer 1

作为客户端路由器，Sapper 必须大量劫持滚动管理和恢复，以模拟在每次页面更改时完全重新加载浏览器时通常会出现的行为。

为此，uses history's state 知道要恢复的滚动位置。

当您使用history.replaceState 时，您正在更改状态（这是您放置给replaceState 的第一个参数）。因此，当您稍后弹出状态时，Sapper 不会找到它的恢复滚动数据。

您可以尝试像这样手动保留历史状态：

// notice the first argument
history.replaceState(history.state, '', decodeURIComponent(`${window.location.pathname}?${params}`))

我认为history.scrollRestoration 实际上对 Sapper 没有任何影响。