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

Question

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

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

jQuery 加载（）：

$(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");
}

Answer 1

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

你需要这样的东西：

$(document).ready(function() {
    $('form').submit(function(e) {
        // stop the submit
        e.preventDefault();

        // execute your function
        updateChat();
    });
});