Question

我正在做一个小型聊天功能，以便我的用户可以在视频通话会话中发表评论。我有一个带有以下功能的聊天框onkeypress，使他们能够发送消息。

我现在无法弄清一件事，那就是如何在将每条消息添加到媒体时使聊天框自动滚动。

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来呈现聊天消息：

<!-- 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键时，消息就发送了。

我遇到的问题是如何使聊天框中的消息在每个新消息上向上滚动，以便用户可以看到底部的最新消息。

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（）函数的结尾吗？

使用CSS自动滚动聊天框

2 个答案: