jquery scrolltop оставаться в позиции после ответа

Question

Я написал код для просмотра истории чата. Все отлично работает, но я это понял. Когда вы прокручиваете div для просмотра истории, старые сообщения отображаются одновременно. Я добавил этот код $("#messages").scrollTop(200);, чтобы продолжить прокрутку, но этого не должно быть. Если вы хотите просмотреть старые сообщения в таких приложениях, как WhatsApp или Facebook, вы можете продолжить прокрутку для просмотра старых сообщений.

Что я должен делать, чтобы оставаться на месте после ответа?

Вот ДЕМО стр.

$(document).ready(function() {
  var logDown = $(".chatContainer");
  logDown.animate({ scrollTop: logDown.prop("scrollHeight") }, 0);
  var messages = ''; // New Posts are in demo
  var scrollLoading = true;
  $("#messages").scrollTop($("#messages")[0].scrollHeight);
  $("#messages").on("scroll", function() {
    if (scrollLoading && $("#messages").scrollTop() == 0) {
      $("#messages").prepend(messages);
      $("#messages").scrollTop(200);
    }
  });
});

Answer 1

Если я понял вашу проблему, вы не хотите прокручивать верхнюю часть сообщений в каждом пакете prepends.

Мне удалось получить версию без jQuery и использовать window.requestAnimationFrame для хорошей производительности прокрутки..

Просто мои 0,02 доллара на проблему.

var container = document.querySelector("#messages");
container.scrollTop = container.scrollHeight;
container.addEventListener("scroll", function(e) {
  last_known_scroll_position = e.target.scrollTop;
  var ticking;

  if (!ticking) {
    window.requestAnimationFrame(function() {
      if (last_known_scroll_position == 0) {
        var delta = e.target.scrollHeight;
        for (var i = 1; i <= 5; i++) {
          var message = document.createElement("DIV");
          message.textContent = "Message Here";
          message.classList.add("message", "red");
          e.target.prepend(message);
        }
        delta = e.target.scrollHeight - delta;
        e.target.scrollTop = delta;
        ticking = false;
      }
    });

    ticking = true;
  }
});

DIV.chatContainer {
  height: 200px;
  overflow: auto;
}

.message {
  margin-bottom:10px;
}

.red {
  background-color:red;
}

<div class="container">
  <div class="chatContainer" id="messages">
    <div class="message">Message HERE</div>
    <div class="message">Message HERE</div>
    <div class="message">Message HERE</div>
    <div class="message">Message HERE</div>
    <div class="message">Message HERE</div>
    <div class="message">Message HERE</div>
    <div class="message">Message HERE</div>
    <div class="message">Message HERE</div>
    <div class="message">Message HERE</div>
    <div class="message">Message HERE</div>
    <div class="message">Message HERE</div>
    <div class="message">Message HERE</div>
    <div class="message">Message HERE</div>
    <div class="message">Message HERE last</div>
  </div>
</div>

Answer 2

теперь я понял, я решил это, вычтя old-height из новой высоты и установив эту "old-position" как scrolltop

var old_height,new_height;
$("#messages").on("scroll", function() {
    if (scrollLoading && $("#messages").scrollTop() == 0) {
      old_height = $("#messages")[0].scrollHeight;
      $("#messages").prepend(messages);      
      new_height = $("#messages")[0].scrollHeight;
      $("#messages").scrollTop(new_height - old_height); 
    }
  });

работает оптимально для меня