javascript - 将数据添加到div时如何自动滚动到底部

Question

我正在制作一个网络聊天应用程序，在其中添加了一些很酷的功能，例如清除聊天按钮等等......
但我面临这个问题..
每当我附加超过 div 高度的更多消息时，它会显示滚动条但确实不要向下滚动以向客户端显示新消息。有人可以帮我解决这个问题吗？

这是它的 index.html 代码：（我无法发送 server.js 代码，因为它由 node.js 运行）

    var socketio = io();
     function update(list)
     {
        for(var i = 0; i < list.length; i++)
        {
            $("#users").append("" + list[i] + ", ");
        }
     }
    // block
    $("#login-form").submit(function(event){
        event.preventDefault();
        if($("#username").val() == "" || $("#username").val() == " ")
        {
            alert("Please enter a valid username.");
        }
        else
        {
            $username = $("#username").val();

            $("#total").hide();
            $("#chat-area").show();
            $("#messages").html("");
            socketio.emit("has connected", $username);
        }
    });
    $("#message-form").submit(function(event){
        event.preventDefault();
        if($("#message").val() == "" || $("#message").val() == " ")
        {
            alert("Please enter a message.");
        }
        else
        {
            socketio.emit("new message", {username: $username, message: $("#message").val()});
            $("#message").val("");
        }
    });
        socketio.on("has connected", function(data) {
            $("#users").html("");
            update(data.usersList);
            $("#messages").append("<li><i><b>"+ data.username +"</b> has connected</i></li>");
        });
        socketio.on("has disconnected", function(data) {
            $("#users").html("");
            update(data.usersList);
            $("#messages").append("<li><i><b>"+ data.username +"</b> has disconnected</i></li>");
        });
        socketio.on("new message", function(data) {
            if(data.username == $username)
            {
            $("#messages").append("<li><b>You</b>: " + data.message +  "</li>");
            }
            else
            {
            $("#messages").append("<li><b>" + data.username + "</b>: " + data.message +  "</li>");
            }
        });

当新消息附加到标签<ul>中时，有人可以编辑它以使其自动滚动。<div>注意：它的 id<ul>是“消息”。

标签： javascriptjqueryhtmlcsschat

Answer 1

让我们假设您的 div 的 id 为“#div1”。然后你可以这样做：

$("#div1").animate({ scrollTop: $('#div1').prop("scrollHeight")}, 1000);