如何防止使用 Socket.io 滚动类似事件？ - Angular 7

Question

When Array Element Update Use Socket.io then Page Scrolled Down in Angular 7. Please Tell How to stop page scroll down in like event.

this.socket.on(discussion.id, (reponse: any) => 
      {
        for (const [index, discussion] of this.discussionList.entries()) {
          if (reponse.data.id == discussion.id)
          {
            reponse.data.displayComment = discussion.displayComment;
            this.discussionList[index] = reponse.data;
            console.log('Updated');
            break; //Stop this loop, we found it!
          }
          console.log('finding....');
        }
      });

Answer 1

You basically updating some random item in array which is rendered as list. Of course your list will change content and new content can appear in current view. Its how html in browser works - nothing related to "Angular 7". Scroll not changed - changed what is visible in current scroll.

What you want to do is plain JS madness:

1. Before updating array 'remember' what was visible in current scrolled view. For example you read scrollTop and they loop over each item in list and check it's offset from top - closest to scrollTop is win.
2. After list updated find that element and scroll back to it.

It is messy, heavy for performance but thats a price of changing random piece of html on page.