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

问题描述

使用Socket.io更新数组元素时，然后在Angular 7中向下滚动页面。请告诉如何在发生类似事件时停止向下滚动页面。

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....');
        }
      });

解决方法

基本上，您更新了呈现为列表的数组中的一些随机项。当然，您的列表将更改内容，并且新内容可以显示在当前视图中。它在浏览器中html的工作方式-与“ Angular 7”无关。滚动未更改-更改了当前滚动中可见的内容。

您想要做的就是普通的JS疯狂：

1. 在更新数组之前，请“记住”当前滚动视图中可见的内容。例如，您阅读scrollTop，它们遍历列表中的每个项目，并检查其与顶部的偏移量-最靠近scrollTop的位置为赢。
2. 更新列表后，找到该元素并滚动回到它。

这很杂乱，性能很沉重，但这就是改变页面上随机HTML的代价。