替换整个消息 div 时聊天室的滚动问题答案

【问题标题】：Scrolling issue on chat room when entire message div is replaced替换整个消息 div 时聊天室的滚动问题
【发布时间】：2016-05-06 14:29:11
【问题描述】：

我想创建一个聊天室，它每 x 毫秒自动更新一个 div，其中发布的新消息出现在 #messagearea div 中，滚动到底部。这是我用来执行此操作的伪代码。

function fetch_messages{
    loadmsgs();
    $("#messagearea").animate({ scrollTop: 0}, 300);
}

所以每次加载新消息时，它都会向下滚动到底部。

但这带来了一个问题。它不允许用户向上滚动，因为每次在页面上获取和更新消息时它都会一直滚动到底部。当用户尝试向上滚动时，javascript 会每隔 1000 毫秒强制滚动条向下到底部。

所以我想要...

更新整个#messagearea，这是个坏主意，还是我必须更新.append？

【问题讨论】：

如果滚动条不在底部，您可以随时考虑，不要移动滚动条。
相反，就像 facebook 所做的那样，在信使框的顶部放置一个小的覆盖层，说明存在新消息，或者类似的东西
@OliverQueen 我试图这样做，但我无法让它工作。 gist.github.com/desbest/9a8633b54b19fcfaebb93d78714292f2
您尝试过使用w3schools.com/jsref/event_onscroll.asp 吗？
你能发布你是如何将消息附加到 loadmsgs 中的 div 的吗？

【解决方案1】：

我用来避免这种情况的想法是
“在新消息中播放声音”

实际上，您想要达到的目标对于大多数用户来说会非常不舒服因为在阅读上面的一些消息时，它会在新的更新时自动向下滚动到底部。

一个简单的解决方案是

在顶部添加一个按钮，使用户能够通过单击滚动到底部以及一些机制（如播放声音）来通知用户有新消息。

我使用了 append ，只是附加了最新的 unseen 消息

【讨论】：