JQuery 自动滚动 div 到底部

Question

我有页面消息页面，可以通过 ajax 自动获取消息，但包含消息的 div 总是像往常一样滚动到顶部。我希望它像任何其他消息传递应用程序一样自动滚动到 div 底部的最后一条消息。 body 不是 scroll-able 因为它与客户端设备的高度相关联，但内部的其他 div 是 scroll-able 并且目标 div 是与ID 消息。我有一个插件调用程序

    <div class="chat-messages-body" id="chat-messages-body" style="display:flex; flex-direction: column-reverse;">
      <div data-simplebar="init" id="chat-messages-body-init">
        <div class="chat-messages-list" id="chat-messages-list">

<div id="messages">
<!-- loading chats -->
  <div id="" style="padding-top:10%;"> 
    <center class="text-primary rotate-infinite">
      <img src="/images/loading_chats.png" width="35px;"></img>
    </center>
    <p class="text-center" style="color:#ff003c;">Loading...</p>
  </div> 
<!-- .loading chats -->
</div>

        </div><!-- .chat-messages-list -->
      </div><!-- SimpleBar INIT -->
    </div><!-- .chat-messages-body -->

我的 jquery 代码加载消息并滚动到按钮但它不起作用

//jquery get messages, refresh every 5 seconds and scroll to messages bottom
  window.setInterval(function(){
    var id = $("#id").val(); //get transaction id
    $(document).ready(function(){
        $("#messages").load('/jsServerSide/messages.php', {id:id});
    });
    $('#messages').animate({
        scrollTop: $('#messages').get(0).scrollHeight
    }, 2000);
  }, 5000);

这是我当前的body固定高度代码

//Dont scroll page, use fixed 2000px height
  $(document).ready(function() {
      $('#chat-scroll').animate({
          scrollTop: $('#chat-scroll').get(0).scrollHeight
      }, 2000);
  });
// .Dont scroll page, use fixed 2000px height

我用这个插件创建了自定义滚动条SimpleBar

Answer 1

$('#messages').animate({
    scrollTop: $('#messages').prop('scrollHeight')
}, 2000);

这对我有用。来试试吧。

Answer 2

在 load 函数上使用第三个参数，它是每当 AJAX 完成时调用的回调。将动画函数放在该回调中，以便仅在有新内容时才开始滚动。

var $messages = $('#messages');
window.setInterval(function(){
  var id = $("#id").val(); //get transaction id
  $messages.load('/jsServerSide/messages.php', {id:id}, function() {
    $messages.animate({
      scrollTop: $messages.prop('scrollHeight')
    }, 2000);
  });
}, 5000);

Answer 3

这应该适合您。这是一个demo.

$('#messages').animate({
        scrollTop: $('#messages').get(0).scrollHeight
    }, 2000);

JQuery 自动滚动 div 到底部

JQuery automatically scroll div to bottom

html

javascript

css

jquery

simplebar