Question

我有以下问题：我有一个聊天系统（例如FB Messenger / Watsapp），新消息显示在底部，旧消息显示在顶部。我不会立即加载所有消息，而是当用户滚动到顶部并到达触发点（例如，从顶部开始300像素，假设顶部为0）时，我发送了一个请求，要求预加载已归档的消息并将其附加到顶部，< / p>

在这种情况下，滚动条会发疯，我不知道如何冻结视图/滚动条。我正在用React开发，但是为了简单起见，我创建了这个基本的小提琴来突出我的问题。

所以我现在正在做的是，我尝试将滚动条返回到考虑新高度之前的位置（预加载之后）

var chatDiv = undefined
var hasAnimationFinished = true; 
$( document ).ready(function() {
    chatDiv = document.getElementById("chat-area")
    var chatHeight = chatDiv.scrollHeight;
    chatDiv.scrollTop = chatHeight;

});

window.checkIfPreload = function(){
  if(chatDiv.scrollTop < 300 & hasAnimationFinished){
    hasAnimationFinished = false
    var oldScrollHeight = chatDiv.scrollHeight;
    var currentScrollPos = chatDiv.scrollTop;
    chatDiv.innerHTML += chatDiv.innerHTML;
    var newScrollHeight = chatDiv.scrollHeight
    var scrollVal = newScrollHeight - ( oldScrollHeight - currentScrollPos ) 
    $('#chat-area').animate({
      scrollTop: scrollVal
    }, 'fast', function(){
        hasAnimationFinished = true;
    });    
  }
}

我的小提琴：https://jsfiddle.net/a5wzxj4v/12/

我在反应中遇到的另一个问题是我必须使用jQuery->动画功能，因为scrollTop（vanilla JS）或jQuery.scroll（）不起作用；

内容预加载后保持视图/滚动条

0 个答案: