HTML CODE

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

JS Here we have note the scrolltop position [old_height] before loading data.Once the data is loaded on scroll we have to get new scrolltop position[new_height]. scrollTop will be ele.scrollTop = new_height - old_height

*note: don't put style scroll-behaviour:smooth

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