如何实现新消息追加时自动滚动至聊天列表底部？

要解决这个问题，你只需要在新消息成功追加到DOM之后，手动控制聊天容器的滚动条位置，让它直接跳转到内容最底部即可。下面是具体的实现方案：

核心思路 #

聊天容器的scrollHeight属性代表了容器内所有内容的总高度（包括当前不可见的滚动部分），把容器的scrollTop值设置为scrollHeight，就能让滚动条自动滚动到最底部，确保最新消息始终可见。

具体代码实现 #

假设你已经在AJAX的success回调里完成了新消息的拼接和追加，只需要在这之后添加滚动逻辑：

方案1：原生JavaScript（更高效）

// 先完成新消息的追加（你的原有代码）
var pre_content = $('.messages').html();
var new_content = '<li class="clearfix">';
new_content += '<span class="chat-img"><img src="" alt="User Avatar"></span>';
new_content += '<div class="chat-body clearfix"> <div class="header"><strong class="primary-font">' + name + '</strong> </div>';
// 补全你的new_content拼接逻辑...
$('.messages').html(pre_content + new_content);

// 追加完成后，执行滚动
const chatContainer = document.getElementById('get_AllMsg');
chatContainer.scrollTop = chatContainer.scrollHeight;

方案2：jQuery写法

如果你习惯用jQuery操作DOM，可以这样写：

// 完成新消息追加后
$('#get_AllMsg').scrollTop($('#get_AllMsg')[0].scrollHeight);

优化建议 #

你当前用$('.messages').html(pre_content + new_content)的方式更新内容，会重新渲染整个聊天列表，当消息量很大时可能影响性能。更推荐用append()直接添加新元素：

// 用jQuery创建新消息元素
const newMsg = $(`
  <li class="clearfix">
    <span class="chat-img"><img src="" alt="User Avatar"></span>
    <div class="chat-body clearfix">
      <div class="header"><strong class="primary-font">${name}</strong></div>
      <!-- 这里添加消息内容 -->
    </div>
  </li>
`);

// 直接追加到列表末尾
$('.messages').append(newMsg);

// 滚动到底部
$('#get_AllMsg').scrollTop($('#get_AllMsg')[0].scrollHeight);

这样不仅性能更好，也避免了字符串拼接可能出现的语法错误。

内容的提问来源于stack exchange，提问作者Arslan Akram