如何阻止 Sapper 在嵌套路由中滚动回到顶部？

Question

问题是我有两条路线 /istifta 和 /istifta/edit

/istifta 路由显示 istiftas（问题），而 /istifta/edit 路由打开一个面板，用于在同一页面上编辑由于相同 _layout.svelte 文件而出现的问题。

唯一的问题是当我从 /istifta 访问 /istifta/edit 时。它不仅会打开编辑面板，还会滚动到页面顶部。我怎样才能阻止这种行为？我想在此导航中保持相同的滚动位置。 istiftas 是一个很长的列表。对于编辑，它应该保持在相同的滚动位置。一次又一次地滚动到底部并查找 ID 对于用户来说过于复杂。

请解决这个问题。特别是 Rich Harris，如果您正在阅读本文。

Answer 1

我们确实应该着手记录这一点，但是如果您将 sapper-noscroll 属性添加到 <a> 标签，它将阻止该行为：

<!-- in src/routes/istifta/index.svelte -->
<a href="istifta/edit" sapper-noscroll>edit</a>

Answer 2

"sapper": "^0.27.9"

sapper-noscroll 对我不起作用

博客 blogs/index.苗条

<a sapper-noscroll href="blogs/1">Go to Blog 1</a>
<a sapper-noscroll href="blogs/2">Go to Blog 2</a>
<a sapper-noscroll href="blogs/3">Go to Blog 3</a>
<a sapper-noscroll href="blogs/4">Go to Blog 4</a>
...
...
<a sapper-noscroll href="blogs/100">Go to Blog 100</a>

博客/[slug].svelte

<a href="blogs">Go Back to Blogs </a>
<h1> Blog details<h1>

当我从“博客详细信息”页面返回“博客”页面时，它仍然滚动到顶部。我错过了什么吗？

Answer 3

现在是 2020 年，自从 Rich 的回答以来，情况似乎发生了变化。

sapper-noscroll 对我不起作用，但 sapper:noscroll 对我有用。

Sapper docs on the subject

如何阻止 Sapper 在嵌套路由中滚动回到顶部？

How to stop Sapper from scrolling back to top in nested routes?

scroll

svelte

sapper