從下到上滾動jquery \ js時如何加載更多數據

Question

我正在約會網站上進行實時聊天。 所以，我有一個問題，當滾動到達移動設備上的聊天（div）頂部時，如何加載更多數據（ajax）。 我只需要jquery \ vanilla js 邏輯。

Answer 1

代碼

 <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]。一旦數據在滾動上加載，我們必須獲取新的滾動頂部位置[new_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;
      }
    }
  }