如何用Javascript处理向上无限滚动的页面滚动

Question

我有一个应用程序，其页面具有聊天功能。我希望它的外观和感觉像大多数聊天应用程序一样，最新消息位于页面底部，您向上滚动即可查看更多以前的消息。

我的无限滚动的分页方面工作正常。当您滚动到当前页面顶部时，您会收到下一组之前的消息。

不幸的是，当您到达页面顶部时，下一页会加载，但滚动位置仍保留在页面顶部，本质上是“跳”到下一页消息的顶部。这是一个糟糕的用户体验。

Atm，我正在为每个页面添加“标记”。只需

div

和

id

作为页码。当下一组消息加载时，我滚动到最新的页面标记，以保持更好的用户体验。

这感觉很hacky，而且我觉得我错过了一些更简单的东西来防止滚动以这种方式运行。任何想法将不胜感激！

Answer 1

我会尝试在加载新消息之前保存位置，然后滚动到该位置。比如：

const chatContainer = document.getElementById('chat-container');

const prevScrollHeight = chatContainer.scrollHeight;

//here you load and append new messages

chatContainer.scrollTop = chatContainer.scrollHeight - prevScrollHeight;

您必须继续批量保存消息，所以可能不是使用不同的div（像您正在做的那样使用页码作为id），而是使用带有id和内容的对象数组（以便您知道滚动到达时要加载什么）顶部）。