在单个页面应用程序上处理window.scrollTo时

Question

在我的Repl示例更新后，如何转到窗口位置？当我向下滚动并单击卡片并返回主窗口时，它始终跳到顶部。我已经尝试在afterupdate以及beforeupdate上插入window.scrollTo，同时在OpenCard.svelte内也在App.svelte内，但是我无法弄清楚。最好的解决方案是什么？

Repl

Answer 1

对此有多种解决方案，因为对于这样的问题，这是很多代码。

一种解决方法是将此行添加到showHome函数中>

function showHome() {
    visible = true;
    requestAnimationFrame(() => window.scrollTo(0,100)); // That's the line
  }
此解决方案起作用的原因是因为您将整个应用程序置于visible变量上，因此在设置visible = true;之后，该应用程序尚未更新，因此立即调用window.scrollTo将在刷新之前滚动。因此，将其放入requestAnimationFrame将等待DOM的下一次重绘，仅在DOM更新后才进行滚动。

另一个解决方案

仍然需要requestAnimationFrame，没有避免使用它。它将需要创建这样的反应式语句：

$: if (visible) requestAnimationFrame(() => window.scrollTo(0,100));
这样，您的应用将始终知道何时基于visible变量的值更改滚动。