Question

我收到了应该刷新聊天框内容的功能，它还应该向下滚动到最新的消息。我正在使用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");
}

Answer 1

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

你需要这样的东西：

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

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

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

1 个答案: