jQuery 聊天 - 滚动到底部

Question

我有一个脚本，当加载聊天或发送新消息时，它会滚动到消息 div 的底部。我正在检查用户是否已经位于 div 的底部，因为如果不是...我不想每次系统检查新消息时都将其推送到该 div 的底部，但我不能让这个工作......为什么？当系统重新加载消息时...用户不再位于 div 的底部，因此它不会自动滚动..

即使有新消息进来，我也试图确定用户是否位于 div 的底部...但是一旦将新消息添加到消息 div [此代码表明哇这个用户不再是在底部]然后它不再滚动到底部...我需要以某种方式保存该用户以前的位置，然后当添加新消息时...检查用户是否处于相同位置然后滚动到底部也！！

function loadMensagens(scroll = false) {
    jQuery.ajax({
        method: "POST",
        url: "/api/",
        data: {action: "getMensagem", id: "<?=(isset($url[1]) ? $url[1] : 0)?>"}
    }).done(function (r) {
        jQuery("#chatScroll").html(r);
        let divElement = document.getElementById('chatScroll');
        if ((divElement.scrollHeight - divElement.scrollTop === divElement.clientHeight) || scroll) {
            divElement.scrollTop = divElement.scrollHeight;
        }
    });
}

//end loadAllAnexos     loadMensagens(true); 
// first load     setInterval(loadMensagens, 4000);

Answer 1

在更新聊天之前尝试存储用户滚动位置 然后，检查更新前用户是否处于底部 并且仅在存在时才滚动。

我更新了你的代码

function loadMensagens(scroll = false) {
    let divElement = document.getElementById('chatScroll');
    
    // Check if the user is at the bottom
    let wasAtBottom = (divElement.scrollHeight - divElement.scrollTop === divElement.clientHeight);
    
    jQuery.ajax({
        method: "POST",
        url: "/api/",
        data: {action: "getMensagem", id: "<?=(isset($url[1]) ? $url[1] : 0)?>"}
    }).done(function (r) {
        jQuery("#chatScroll").html(r);
        
        // Check if the user was at the bottom before the update or if it's the initial load
        if (wasAtBottom || scroll) {
            divElement.scrollTop = divElement.scrollHeight;
        }
    });
}

// First load with scroll to bottom
loadMensagens(true);

// Subsequent loads without forcing scroll to bottom
setInterval(loadMensagens, 4000);