使用css自动滚动chatbox

Question

我正在制作一个小聊天功能，以便我的用户可以在视频通话会话期间发表评论。我有一个chatbox，它有下面的onkeypress功能，可以让他们发送消息。

我现在只想不出一件事，那就是如何让chatbox在每条消息被附加到媒体上时自动滚动。

var userMessage = function (name, text) {
    return ('<li class="media"> <div class="media-body"> <div class="media">' +
        '<div class="media-body"' +
        '<b>' + name + '</b> : ' + text +
        '<hr/> </div></div></div></li>'
    );
};

var sendMessage = function () {
    var userMessage = $('#userMessage').val();
    socket.emit('chatMessage', { message: userMessage, username: username });
    $('#userMessage').val("");
};

$('#userMessage').keypress(function (event) {

    var keycode = (event.keyCode ? event.keyCode : event.which);
    if (keycode == '13') {
        sendMessage();
    }

});
socket.on('chatMessage', function (data) {
    $('#chatbox-listMessages').append(userMessage(data.username, data.message));
});

我有我的html in handlebar模板来呈现聊天消息：

<!-- CHAT ROOM -->
    <div class="panel-heading">
      CHAT ROOM
      <span class="pull-right" id="chatbox-username">
        {{#if user}}
        {{user.name}}
        {{/if}}
      </span>
    </div>
    <div class="panel-body">
      <ul class="media-list" style="height: 200px; overflow-y: scroll" id="chatbox-listMessages">

      </ul>
    </div>
    <div class="panel-footer">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Type message and press Enter" id="userMessage" />
        <span class="input-group-btn">
          {{!-- <button type="button" class="btn btn-primary" onclick="sendMessage()">SEND</button> --}}
        </span>
      </div>
    </div>

到目前为止，这对我来说非常有效，当用户在输入中输入一条消息并按下enter键时，消息就会被发送。

我遇到的问题是，如何让chatbox中的消息滚动到每条新消息上，以便用户可以看到底部的最新消息。

Answer 1

您需要在DOM中添加新消息后进行滚动

所以

socket.on('chatMessage', function (data) {
    var messages = $('#chatbox-listMessages'),
        messagesNode = messages[0];
    messages.append(userMessage(data.username, data.message));
    messagesNode.scrollTop = messagesNode.scrollHeight;
});

Answer 2

下面是什么：

    $('#chatbox-listMessages').scrollTop($('#chatbox-listMessages').prop("scrollHeight"));

在sendMessage()函数的末尾？