聊天刷新和向下滚动到最新消息的功能不起作用

Function for chat refresh and scrolling down to newest messages doesn't work

本文关键字：最新消息 功能 不起作用 滚动 刷新 聊天      更新时间：2023-09-26

我收到了应该刷新聊天框内容的函数，它也应该向下滚动到最新消息。我正在使用jQuery load();进行刷新，但是当我收到新消息时，它没有向下滚动。正如我所说，我已经收到了ajax使用函数，它应该取代我的jQuery函数。但它甚至不加载内容。

两个代码都在下面，我非常感谢每一个建议，我现在感到真的很无助......

jQuery load（）：

$(document).ready(function(){ 
    var out = document.getElementById("chat");
    var auto = $('#chat'); 
    var add = setInterval(function() {
        // allow 1px inaccuracy by adding 1
        var isScrolledToBottom = out.scrollHeight - out.clientHeight <= out.scrollTop + 1;
        console.log(out.scrollHeight - out.clientHeight,  out.scrollTop + 1);
        // scroll to bottom if isScrolledToBotto
        auto.load("chat_vypis.php")
        if (isScrolledToBottom)
            out.scrollTop = out.scrollHeight - out.clientHeight;
    },500);
    console.log(add);
    return false; 
});

Ajax 使用：

var needsToScrollToBottom=true;
var url='chat_vypis.php';
function updateChat() {
    $.ajax({
        url:url,
        method:'GET',
        success:function(data) {
            var chat=$('#chat');
            chat.html(data);
            if (needsToScrollToBottom) {
                scrollToBottom(chat);
            }
        },
        //even on error, but after the call has completed
        complete:function() {
            setTimeout(updateChat,500);
        }
    });
}
function scrollToBottom(elem) {
    elem.animate({ scrollTop: elem.height() }, "slow");
}
好的

，在访问您的页面后，主要问题似乎是按钮提交页面而不是调用您的函数。

你需要这样的东西：

$(document).ready(function() {
    $('form').submit(function(e) {
        // stop the submit
        e.preventDefault();
        // execute your function
        updateChat();
    });
});
相关文章：