jQuery AUTOMATIC 滚动（无按钮点击）文档准备就绪

Question

我正在创建一个聊天，一切正常，当我单击“发送”按钮时它会向下滚动，但我希望它在文档准备好时一直向下滚动。我通过将滚动功能添加到 setInterval 来做到这一点，但问题是用户基本上无法向上滚动以查看以前的聊天消息，因为他每 0.1 秒向下滚动一次。我的代码是：

    $(function () {

        //$("#messages").scrollTop($("#messages").prop("scrollHeight")); Doesnt work at all

        function updateChat(){
            $("#messages").load('chat/ajaxLoad.php');
            //$("#messages").scrollTop($("#messages").prop("scrollHeight")); This works but the user cannot scroll up anymore
        }

        setInterval(function () {
            updateChat();
        }, 100);


        $("#post").submit(function(){
            $.post("chat/ajaxPost.php", $('#post').serialize(), function (data) {
                $("#messages").append('<div>'+data+'</div>');
                $("#messages").scrollTop($("#messages").prop("scrollHeight")); // This works but only when the user presses the send button
                $("#text").val("");
            });
            return false;
        });
    });

Answer 1

将此添加到您的代码中。

var chat = $("#messages").html();
setInterval(function () {
    updateChat();
    if(chat !== $("#messages").html()){
        $("#messages").scrollTop($("#messages").prop("scrollHeight"));
        chat = $("#messages").html();
    }
}, 2000);

我认为这应该可行（没有测试），但有一些更好的方法可以优化它，比如不将整个 .html() 保存到变量中。

这里的想法是它检查内容是否每 2 秒更改一次。如果是，则向下滚动。

Answer 2

我知道你有什么问题，我有 2 个想法给你：

1. 只有在发布新消息时才向下滚动，例如使用 Ajax 请求时，您可以检查与过去 0.1 秒相比的消息数是否 >，如果是，则滚动，否则忽略。
2. 仅在滚动条位于最大底部位置时每 1-2 秒向下滚动一次。如果滚动未达到最大值，则不要滚动。我觉得这个解决方案更好。

Answer 3

您需要将应用程序上的操作分开， 你也错过了许多可以使应用程序正常工作的检查，并且会 使其易于维护。

我建议代码的外观：

$(function () {

    function updateMessages(){
        var messages_before_update = $("#messages").html();
        $("#messages").load('chat/ajaxLoad.php');
        var message_after_update = $("#messages").html();
        if(messages_before_update !== message_after_update){
            scrollToBottom();
        }

    }

    function scrollToBottom(){
        var scroll_height = $("#messages").prop("scrollHeight");
        var scroll_top = $("#messages").scrollTop();
        if(scroll_height !== scroll_top){
            $("#messages").scrollTop($("#messages").prop("scrollHeight"));
        }
    }

    function addMessage(message){
        $("#messages").append('<div>' + message + '</div>');
    }

    setInterval(updateMessages, 100);

    $("#post").submit(function () {
        $.post("chat/ajaxPost.php", $('#post').serialize(), function (data) {
            addMessage(data);
            scrollToBottom();
            $("#text").val("");
        });
        return false;
    });
});