JQuery всегда прокручивать div вниз (ajax data) - PullRequest
Новая
       22

JQuery всегда прокручивать div вниз (ajax data)

0 голосов
/ 10 февраля 2020

У меня есть страница сообщений на странице, которая автоматически получает сообщения через 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

1 Ответ

0 голосов
/ 10 февраля 2020

Вы можете попробовать это. 

$("#chat-scroll").animate({ scrollTop: $('#chat-scroll').prop("scrollHeight")}, 1000);
...