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

【问题标题】：How to prevent scrolling on like events using Socket.io? - Angular 7如何防止使用 Socket.io 滚动类似事件？ - 角度 7
【发布时间】：2020-08-19 08:00:26
【问题描述】：

当数组元素更新使用 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....');
        }
      });

【问题讨论】：

请详细说明您为实现这一目标所做的工作？

标签： javascript angular sockets socket.io angular7

【解决方案1】：

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

你想做的就是单纯的 JS 疯狂：

在更新数组之前“记住”当前滚动视图中可见的内容。例如，您读取 scrollTop 并循环遍历列表中的每个项目并检查它与顶部的偏移量 - 最接近 scrollTop 是获胜。
列表更新后找到该元素并滚动回它。

它很乱，性能很重，但这是在页面上更改随机 html 的代价。

【讨论】：