scroll - 在 Svelte/Sapper 中，history.replaceState() 不适用于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 中没有任何效果。