JQuery автоматически прокручивает div вниз

Question

У меня есть страница сообщений страницы, которая автоматически получает сообщения через ajax, но содержащий div сообщения всегда прокручивается вверх, как обычно. Я хочу это как любое другое приложение для обмена сообщениями, которое автоматически прокручивает до последнего сообщения, которое находится внизу div. Тело не может прокручиваться, потому что оно связано с высотой клиентского устройства, но другие 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);

Вот мой текущий код фиксированной высоты тела

//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

Используйте третий параметр функции 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 2

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

Это работает для меня. Go вперед и попробуйте.

Answer 3

Это должно работать для вас. Вот демо .

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