这个问题我之前帮不少开发者处理过——自动刷新确实能保证消息实时性，但打断用户查看历史消息的体验就很糟了。核心思路就是根据用户的滚动状态来调整刷新后的行为，下面给你两种实用的解决方案：

方案一：始终刷新，但保持用户当前滚动位置 #

这个方案会持续获取最新消息，但如果用户正在查看历史消息（没在聊天框底部），刷新后会维持当前的滚动位置，不会强制跳回底部；只有当用户在底部时，才自动滚动到最新消息。

// 封装刷新逻辑
function refreshChatMessages() {
  const $messageContainer = $('#messagesBody');
  // 提前判断用户是否处于聊天框底部（加10px容错，避免差一点到底部就不触发）
  const isScrolledToBottom = $messageContainer[0].scrollHeight - $messageContainer.scrollTop() <= $messageContainer.outerHeight() + 10;
  // 记录当前滚动位置
  const currentScrollPosition = $messageContainer.scrollTop();

  // 加载最新消息
  $messageContainer.load(`get-messages.php?employee_id=${employee_id}`, function() {
    // 加载完成后根据之前的状态调整滚动位置
    if (isScrolledToBottom) {
      // 如果之前在底部，滚动到最新消息位置
      $messageContainer.scrollTop($messageContainer[0].scrollHeight);
    } else {
      // 如果之前在查看历史，回到原来的滚动位置
      $messageContainer.scrollTop(currentScrollPosition);
    }
  });
}

// 每秒执行一次刷新
setInterval(refreshChatMessages, 1000);

方案说明 #

• 先通过scrollHeight（内容总高度）、scrollTop（当前滚动距离）和outerHeight（容器可见高度）判断用户是否在底部；
• 加载新消息后，根据之前的滚动状态决定是否跳到底部，既保证实时性，又不打断用户阅读历史。

方案二：查看历史消息时暂停刷新（更高效） #

如果觉得每秒刷新太消耗服务器资源，也可以选择当用户滚动离开底部时暂停刷新，回到底部再恢复，这样既能避免打扰用户，又能减少不必要的请求。

let refreshTimer = setInterval(refreshChatMessages, 1000);
const $messageContainer = $('#messagesBody');

// 监听滚动事件，切换刷新状态
$messageContainer.on('scroll', function() {
  const isScrolledToBottom = $messageContainer[0].scrollHeight - $messageContainer.scrollTop() <= $messageContainer.outerHeight() + 10;
  
  if (isScrolledToBottom) {
    // 回到底部时恢复刷新
    if (!refreshTimer) {
      refreshTimer = setInterval(refreshChatMessages, 1000);
    }
  } else {
    // 离开底部时停止刷新
    clearInterval(refreshTimer);
    refreshTimer = null;
  }
});

function refreshChatMessages() {
  $messageContainer.load(`get-messages.php?employee_id=${employee_id}`, function() {
    // 加载完成后自动滚动到底部
    $messageContainer.scrollTop($messageContainer[0].scrollHeight);
  });
}

方案说明 #

• 通过监听滚动事件动态开启/关闭刷新定时器；
• 只有用户关注最新消息时才会持续刷新，查看历史时完全不会被打扰，同时降低了服务器压力。

你可以根据自己的需求选择合适的方案，两种都能完美解决你遇到的滚动跳转问题~

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