响应后 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

如果我理解您的问题，您不想在每批前置时滚动到消息的顶部。

我设法拉出一个没有 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>