在单页应用程序的 svelte 上处理 window.scrollTo

Question

我如何在更新我的 Repl 示例后转到 window 位置？当我向下滚动并单击卡片并返回到主 window 时，它总是跳到顶部。我试图在更新后和更新前插入 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 变量值更改滚动条。

我认为你应该选择第二种解决方案，它在未来的变化中更稳定。

要了解有关 requestAnimationFrame 及其使用方法的更多信息：https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame

在单页应用程序的 svelte 上处理 window.scrollTo

Handle window.scrollTo on svelte on a single page application

scrollto

single-page-application

svelte

svelte-3