如何实现每秒刷新div并保持其始终滚动到底部？

你的代码失效的核心原因是：setInterval里的load是异步操作，每次刷新容器内容后，页面初始化时的滚动逻辑不会自动重复执行，导致新消息加载后容器无法自动滚动到底部。另外，高频的load请求也可能引发不必要的性能问题。

修正后的代码 #

把滚动逻辑封装成可复用的函数，放到load的回调中，确保每次内容刷新完成后自动触发滚动：

// 页面初始化时先滚动到底部
$(document).ready(function(){
  scrollChatToBottom();
});

// 封装滚动到底部的函数
function scrollChatToBottom() {
  const $chatContainer = $('#chat_message_inner_container');
  $chatContainer.scrollTop($chatContainer[0].scrollHeight);
}

// 每秒刷新容器并在加载完成后滚动
setInterval(function() {
  $('#chat_message_inner_container').load(
    location.href + " #chat_message_inner_container",
    // 加载完成后的回调：执行滚动
    scrollChatToBottom
  );
}, 1000);

额外优化建议 #

• 若聊天消息更新频率不高，建议延长刷新间隔（比如3-5秒），减少服务器请求压力和页面抖动。
• 可添加简易的加载状态提示（比如容器内显示"加载中..."），避免用户误以为页面无响应。
• 进阶优化：改为仅请求新增的聊天消息而非整个容器内容，大幅提升性能和用户体验。

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