jQuery聊天滚动问题：新消息加载时无法自动滚动到底部

你的问题出在更新DOM之后才判断用户是否处于底部——当你用html(r)替换聊天内容后，容器的scrollHeight已经改变，此时判断的是新内容的滚动状态，而非用户更新前的位置。正确做法是在更新内容前先记录用户的滚动位置状态。

修改后的代码如下：

function loadMensagens(scroll = false) {
    const chatElement = document.getElementById('chatScroll');
    // 更新DOM前先记录用户是否处于底部，加10是兼容滚动条精度误差
    const isAtBottom = chatElement.scrollHeight - chatElement.scrollTop <= chatElement.clientHeight + 10;

    jQuery.ajax({
        method: "POST",
        url: "/api/",
        data: {action: "getMensagem", id: "<?=(isset($url[1]) ? $url[1] : 0)?>"}
    }).done(function (r) {
        jQuery("#chatScroll").html(r);
        // 根据之前记录的状态或传入的scroll参数决定是否滚动
        if (isAtBottom || scroll) {
            chatElement.scrollTop = chatElement.scrollHeight;
        }
    });
}

// 首次加载强制滚动到底部
loadMensagens(true); 
// 定时刷新消息
setInterval(loadMensagens, 4000);

关键修改说明： #

• 提前记录滚动状态：在AJAX请求完成后、替换聊天内容前，先判断用户是否处于底部。额外加的10像素容错，是为了避免因滚动条精度问题导致的误判（比如用户几乎到底但差几个像素）。
• 复用DOM元素引用：提前获取chatElement，避免重复调用getElementById，提升代码性能。
• 保留参数优先级：scroll参数仍保持最高优先级，比如发送新消息后调用loadMensagens(true)，可以强制滚动到底部，不受用户当前位置影响。

这样修改后，用户之前处于底部时，新消息加载后会自动滚到底；若用户正在浏览历史消息，则不会被强制拉到底部，完全符合需求。

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