jQuery实现AJAX首次加载会话后div自动滚动到底部问题咨询

你的代码不生效主要有两个核心问题：

• jQuery.load()是异步AJAX方法，你在调用load后立刻执行滚动逻辑时，服务端返回的会话内容还没插入到页面DOM中，此时读取到的元素高度还是空内容的高度，滚动自然不生效
• scrollHeight是DOM原生属性，不是函数，你代码中多加了()调用，也是导致逻辑失效的原因之一

你可以通过load方法的回调函数（内容插入DOM完成后自动触发）加首次加载标记的方式实现需求，修改后的代码如下：

const urlParams = new URLSearchParams(window.location.search);
const ID = urlParams.get('DM');
console.log(ID);

$(document).ready(function(){
  // 标记是否为首次加载
  let isFirstLoad = true;

  // 首次加载传入回调，内容加载完成后再执行滚动逻辑
  $("#convo").load("convo.php?DM=" + ID, function() {
    if (isFirstLoad) {
      // scrollHeight是属性不需要加括号
      $("#convo").scrollTop($("#convo")[0].scrollHeight);
      // 切换标记，后续刷新不再触发滚动
      isFirstLoad = false;
    }
  });

  setInterval(function() {
    // 定时刷新不需要加滚动逻辑，不会触发滚动
    $("#convo").load("convo.php?DM=" + ID);
  }, 5000);
});

额外注意 #

请确保你的#convo元素已经设置了固定高度和纵向滚动属性，否则元素本身不会出现滚动条，滚动逻辑也不会生效，参考样式：

#convo {
  height: 600px; /* 可根据你的布局需求调整高度 */
  overflow-y: auto;
}

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