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

Question

Repl示例更新后，如何转到窗口位置？当我向下滚动并点击一张卡片并返回主窗口时，它一直跳到顶部。我试着在更新后和更新前，在OpenCard.svelte和App.svelte中插入window.scrollTo，但我想不通。对此，最好的解决方案是什么？

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更新后进行滚动。

另一个解决方案仍然需要CCD_ 6，无法避免它的使用。它将需要创建这样一个反应性语句：

$: if (visible) requestAnimationFrame(() => window.scrollTo(0,100));

这样，您的应用程序将始终知道何时根据visible变量的值更改滚动。

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

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