scroll to specific height and load some data

Question

Hey guys I was working on a chat template and I wanted to add a feature to it which loads the last 30 messages of the chat and when you scroll up to the first one, it loads the next 30 messages and so on I tried the scroll function with getting the tag by getting the element by id but it didn't work that will be very kind of you if you offer me an effective solution I also add an event on scroll to HTML file but didn't work scroll spy was also not efficient here is my ts file:

async loadChatMsgs(INum?: number) {
let temp;
if (INum) {
  console.log('hiiii');
  temp = await this._service.get(this.getUrl, {
    uuid: this.myUuid,
    type: 'get',
    index: INum,
  });
} else {
  temp = await this._service.get(this.getUrl, {
    uuid: this.myUuid,
    type: 'get',
  });
}
this.message = temp.result.data.messages;
this.avatar = temp.result.data.avatar;
this.userName = temp.result.data.user_name;
this.index = this.message[this.message.length - 1].index;
console.log(this.message);
console.log(this.index);

}

UmairFarooq · Answer

Can you do it like this?

basically when the scroll reaches the top you can call the function which loads your messages. example: I am changing the body color to pink from orange when it hits the top.

window.addEventListener("scroll", (event) => {
  let scroll = this.scrollY;
  if (scroll == 0) {
    document.body.style.backgroundColor = "hotpink";
    /*myFunction();*/
  } else {
    document.body.style.backgroundColor = "orange";
  }
});

body {
  margin: 0;
  padding: 0;
  height: 300vh;
  width: 100vw
}
h1{
margin-bottom:90vh;
}

Scroll Down ↓

Scroll To The Top ↑

scroll to specific height and load some data

1 Answers