Прокрутка до конца div после первого вызова Setinterval ()

Question

Я сделал раздел комментариев с фиксированной высотой и overflow-y: scroll, и я хочу загрузить туда некоторые комментарии с помощью функции setInterval.

Проблема с моим кодом состоит в том, что каждую секунду updateMessages называется, он прокручивает меня до дна, и я не могу прокрутить вверх, потому что каждую секунду меня отправляют обратно в дно. Как это сделать, чтобы загрузить сообщения с прокручиваемым div и сразу после этого запустить функцию setinterval без прокрутки вниз?

<script>
  setInterval(function(){
    updateMessages();
  },1000);
  function updateMessages(){
    $.ajax({
      url: 'includes/display_discussions.php?id=<?php echo $_GET['id']; ?>',
      type: 'POST',
      success: function(show_messages){
                 if(!show_messages.error){                               
                   $("#scroll_down").html(show_messages);
                   var div = document.getElementById("scroll_down");
                   div.scrollTop = div.scrollHeight;
                 }
               }
    });
   }    
</script>

Answer 1

Вы можете переключать логическое значение после загрузки сообщений и использовать его для прокрутки только в первом случае. Затем вы можете вызвать updateMessages один раз вручную при загрузке страницы и setInterval для вызова каждые 30 секунд:

var messagesLoaded = false;

function updateMessages() {
  $.ajax({
    url: 'includes/display_discussions.php?id=<?php echo $_GET["id"]; ?>',
    type: "POST",
    success: function(show_messages) {
      if (!show_messages.error) {
        $("#scroll_down").html(show_messages);

        if (!messagesLoaded) {
          messagesLoaded = true;
          var div = document.getElementById("scroll_down");
          div.scrollTop = div.scrollHeight;
        }
      }
    }
  });
}

document.addEventListener("DOMContentLoaded", updateMessages);

setInterval(updateMessages, 30000);