响应后 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) {&nbsp; last_known_scroll_position = e.target.scrollTop;&nbsp; var ticking;&nbsp; if (!ticking) {&nbsp; &nbsp; window.requestAnimationFrame(function() {&nbsp; &nbsp; &nbsp; if (last_known_scroll_position == 0) {&nbsp; &nbsp; &nbsp; &nbsp; var delta = e.target.scrollHeight;&nbsp; &nbsp; &nbsp; &nbsp; for (var i = 1; i <= 5; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var message = document.createElement("DIV");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; message.textContent = "Message Here";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; message.classList.add("message", "red");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; e.target.prepend(message);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; delta = e.target.scrollHeight - delta;&nbsp; &nbsp; &nbsp; &nbsp; e.target.scrollTop = delta;&nbsp; &nbsp; &nbsp; &nbsp; ticking = false;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; &nbsp; ticking = true;&nbsp; }});DIV.chatContainer {&nbsp; height: 200px;&nbsp; overflow: auto;}.message {&nbsp; margin-bottom:10px;}.red {&nbsp; background-color:red;}<div class="container">&nbsp; <div class="chatContainer" id="messages">&nbsp; &nbsp; <div class="message">Message HERE</div>&nbsp; &nbsp; <div class="message">Message HERE</div>&nbsp; &nbsp; <div class="message">Message HERE</div>&nbsp; &nbsp; <div class="message">Message HERE</div>&nbsp; &nbsp; <div class="message">Message HERE</div>&nbsp; &nbsp; <div class="message">Message HERE</div>&nbsp; &nbsp; <div class="message">Message HERE</div>&nbsp; &nbsp; <div class="message">Message HERE</div>&nbsp; &nbsp; <div class="message">Message HERE</div>&nbsp; &nbsp; <div class="message">Message HERE</div>&nbsp; &nbsp; <div class="message">Message HERE</div>&nbsp; &nbsp; <div class="message">Message HERE</div>&nbsp; &nbsp; <div class="message">Message HERE</div>&nbsp; &nbsp; <div class="message">Message HERE last</div>&nbsp; </div></div>