Estoy trabajando en un chat en vivo en un sitio de citas. Entonces, tengo una pregunta, ¿cómo puedo cargar más datos (ajax) cuando el desplazamiento llega a la parte superior del chat (div) en un dispositivo móvil? Solo necesito jquery \ vanilla js logic.
CÓDIGO HTML
<div class="chat-list" id="messages" #scrollMe [scrollTop]="scrolltop" (scroll)="onScrollChat()"> <div *ngFor="let message of Chats;let i = index"> </div> </div>JS Aquí tenemos nota de la posición de la parte superior del desplazamiento [old_height] antes de cargar los datos. Una vez que los datos se cargan en el desplazamiento, tenemos que obtener una nueva posición de la parte superior del desplazamiento [new_height]. scrollTop será ele.scrollTop = new_height - old_height
*nota: no pongas estilo 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; } } }