Question

我写了一个代码来查看聊天记录。一切正常，但我意识到了。向上滚动div来查看历史记录时，一次显示旧帖子。我已经添加了此代码$("#messages").scrollTop(200);以便能够继续滚动，但事实并非如此。当您想在whatsapp或facebook等应用中查看旧消息时，可以继续向上滚动以查看旧消息。

我应该怎么做才能在回应后保持位置？

这是 DEMO 页。

$(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

现在我明白了，我通过从新高度中减去旧高度来解决此问题，并将此“旧位置”设置为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); 
    }
  });

最适合我

Answer 2

如果我了解您的问题，那么您不想在每批准备时都滚动到消息顶部。

我设法在没有jQuery的情况下提取了一个版本，并使用scale()获得了良好的滚动性能。

就这个问题我只需$ 0.02。

window.requestAnimationFrame

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;
}

响应后jQuery滚动顶部停留位置

2 个答案: