Question

我正在尝试制作一个聊天应用程序，当我发送我的消息它工作正常并且它保持滚动到底部但在另一边我收到消息但它没有滚动到收到的最新消息！

我发送消息时使用以下查询滚动到底部

<script>
var $cont = $('.con1');
$cont[0].scrollTop = $cont[0].scrollHeight;

$('.inp').keyup(function(e) {
    if (e.keyCode == 13) {
        $cont.append('<p>' + $(this).val() + '</p>');
        $cont[0].scrollTop = $cont[0].scrollHeight;
        $(this).val('');
    }
})
.focus();

</script>

这是用于从mySQL数据库中检索消息的AJAX代码

    function get_messages() {
      $.ajax({
        url: 'ajax/get_messages.php',
        method: 'GET',
        success: function(data) {
          $('.msg-wgt-body').html(data);
        }
      });
    }

如何自动滚动到最新消息

提前致谢！

修改

      <div class="msg-wgt-body con1" id="Box">
    <table>
      <?php
      if (!empty($messages)) {
        foreach ($messages as $message) {
          $msg = htmlentities($message['message'], ENT_NOQUOTES);
          $user_name = ucfirst($message['username']);
          $sent = date('Y-m-d H:m:s');
          echo <<<MSG
          <tr class="msg-row-container">
            <td>
              <div class="msg-row">
                <div class="avatar"></div>
                <div class="message">
                  <span class="user-label"><a href="#" style="color: #6D84B4;">{$user_name}</a> <span class="msg-time">{$sent}</span></span><br/>{$msg}
                </div>
              </div>
            </td>
          </tr>
         MSG;
        }
      } else {
        echo '<span style="margin-left: 25px;">No chat messages available!</span>';
      }
      ?>
    </table>
  </div>

Answer 1

以下将简化您的困境：

<div id="top"></div>
<p>Message 1</p>
<p>Message 2</p>
<div id="bottom"></div>

然后您可以轻松滚动到顶部或底部：

$("#bottom").get(0).scrollIntoView();

所以在你的Ajax调用中：

function get_messages() {
  $.ajax({
    url: 'ajax/get_messages.php',
    method: 'GET',
    success: function(data) {
      $('.msg-wgt-body').html(data);
      $("#bottom").get(0).scrollIntoView();
    }
  });
}

Answer 2

使您的滚动码可重复使用，并在按下输入时以及通过ajax更新时调用它。同样，通过输入的输入键将提交代码分离，意味着您可以添加提交按钮而不会重复回调。

var chatApp = {};
chatApp.cont = $('.con1')[0];
chatApp.input = $('.inp')[0]

chatApp.scrollToEnd = function() {
    chatApp.cont.scrollTop = chatApp.cont.scrollHeight;
};

chatApp.input.on('keyup', function(e) {
    if (e.keyCode == 13) {
        chatApp.chatSubmit();
    }
})
.focus();

// make submit reusable so that you can attach a submit button
$('.chat-submit').on('click', chatApp.chatSubmit);

chatApp.chatSubmit = function() {
    chatApp.cont.append('<p>' + chatApp.input.val() + '</p>');
    chatApp.scrollToEnd();
    chatApp.input.val('');
}


chatApp.get_messages() {
    $.ajax({
        url: 'ajax/get_messages.php',
        method: 'GET',
        success: function(data) {
            $('.msg-wgt-body').html(data);
            chatApp.scrollToEnd();
        }
    });
}

数据动态加载时滚动到底部div？

2 个答案: