如何通过在StencilJS中滚动到顶部来在加载内容时保持滚动位置？

Question

我正在使用stencilJS构建一个聊天应用程序。我有一个聊天屏幕，其中显示聊天消息，用户可以在其中滚动到顶部以加载较旧的聊天消息。问题是，当较早的聊天加载滚动位置移至顶部时，我必须将其重置为先前位置。我不希望用户看到我们将滚动位置从顶部重置为上一个位置，我正在尝试实现类似whatsapp滚动的滚动。

在加载新内容之前，我正在使用scrollAtTop函数保存当前滚动位置，该函数将在到达顶部时被调用。

scrollAtTop() {
    this.previousScrollTop = document.documentElement.scrollTop;
    this.previousScrollHeight = document.documentElement.scrollHeight;
    this.loadOlderMessages();
  }

然后在内容加载后滚动到顶部，然后我重置到先前的位置。

 window.scrollTo(0, (document.documentElement.scrollHeight -
        this.previousScrollHeight +
        this.previousScrollTop));

我尝试使用requestAnimationFrame来设置重画之前的滚动位置，但这不起作用。我还使用MutationObservers来检测聊天列表中的更改并在重新绘制屏幕之前重置滚动位置，但是这些解决方案无法正常工作。