使用AJAX加载会话后如何让div仅在首次加载时自动滚动到底部

核心问题原因 #

1. jQuery.load()是异步AJAX方法，你在调用load后立即执行滚动逻辑时，会话内容还没完成请求和渲染，#convo的高度还是初始空值，滚动自然不生效。
2. 你没有设置首次加载标记，无法区分首次加载和定时刷新的执行逻辑。

修复后的实现代码 #

$(document).ready(function(){
  // 标记是否为首次加载会话
  let isFirstConvoLoad = true;
  // 请提前定义好你的会话ID变量，此处仅为示例
  const ID = '你的业务会话ID';

  // 封装会话加载方法
  function loadConvo() {
    $("#convo").load("convo.php?DM=" + ID, function() {
      // 仅首次加载完成后执行滚动到底部
      if (isFirstConvoLoad) {
        // 用原生DOM的scrollHeight获取完整内容高度，比jQuery.height()更准确，避免内容溢出时高度计算错误
        $("#convo").scrollTop($("#convo")[0].scrollHeight);
        // 标记设为false，后续定时刷新不会再触发滚动
        isFirstConvoLoad = false;
      }
    });
  }

  // 首次调用加载
  loadConvo();
  // 定时刷新逻辑
  setInterval(loadConvo, 5000);

  // 侧边栏逻辑可合并到同一个ready回调，无需重复写ready
  $("#sidebar").load("sidebar.php");
  setInterval(function() {
    $("#sidebar").load("sidebar.php");
  }, 5000);
});

额外注意事项 #

你需要给#convo容器设置固定高度和滚动样式，否则scrollTop属性不会生效，示例CSS如下：

#convo {
  /* 根据你的业务需求设置高度 */
  height: 70vh;
  overflow-y: auto;
}

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