如何在从下到顶滚动jquery \ js时加载更多数据

Question

我在一个交友网站上做一个现场聊天。因此，我有一个问题，当滚动到移动设备上的聊天(Div)顶部时，如何加载更多的数据(ajax)。我只需要jquery \ vanilla js逻辑。

Answer 1

HTML代码

 <div class="chat-list" id="messages" #scrollMe [scrollTop]="scrolltop" (scroll)="onScrollChat()">
      <div *ngFor="let message of Chats;let i = index">
      </div>
 </div>

，JS，，这里我们已经注意到滚动顶部位置old_height，在加载data.Once之前，数据被加载到滚动中，我们必须获得新的滚动顶positionnew_height。scrollTop将是ele.scrollTop = new_height - old_height

*注意:不要把样式卷轴-行为:光滑

onScrollChat() {
    if (this.selectedTab != 0) {
      let ele = document.getElementById('messages');
      let old_height = ele.scrollHeight; // getting height before loading more messages

      if (ele.scrollTop == 0) {
      //call chat api to load more messages
            this.tempMsgs = data;//loaded messages
            this.Chats = this.tempMsgs.concat(this.Chats)
            this.changeDetectionRef.detectChanges();
            let new_height = ele.scrollHeight
            ele.scrollTop = new_height - old_height;
      }
    }
  }