Question

我有一个页面标题，可以动态显示用户滚动浏览的评论数。在此处查看其运行情况：

如您所见，随着计数器的更新，屏幕有些抖动……

要显示帖子，我有以下html：

 <div>{{ currentCommentNumber }} of {{ commentCount ? commentCount : 0 }} Posts</div>

在页面加载时设置了commentCount的地方，并使用currentCommentNumber更新了intersection observer。每个评论都有一个特定的ID号，在此函数中，我将所有可见的评论添加到数组中，并将最小的数字设置为currentCommentNumber：

  onIntersection({ target, visible }: { target: Element; visible: boolean }): void {
    if(visible) {
      this.visibleElements.push(target.id.split("-")[1])
    } else {
      this.visibleElements = this.visibleElements.filter(el => el != target.id.split("-")[1])
    }
    this.currentCommentNumber = Math.min(...this.visibleElements) + 1;
  }

我确认这是HTML更新的问题，方法是删除HTML，但保持观察者和页面滚动回到非常平滑的状态。有没有一种方法可以防止在“重新绘制”标题html时出现卡顿现象？谢谢！

注释：

我试图将计数器元素从标题移到内容div中，只是为了确认这不是固定位置问题，而且结结仍然存在。

谢谢！

Answer 1

这句话帮助我解决了问题：

您是否考虑过取消HTML更新，所以不会发生直到滚动停止一秒钟？

对于感兴趣的用户，Ionic在(ionScrollEnd)标签（所有内容均放置在页面上）上有一个<ion-content>事件，该事件在滚动动画停止时触发，我简单地调用了该方法并进行了更新计数，而不是在发生新的相交事件时尝试更新RIGHT。

这解决了抖动问题：）

页面标题中的数字递增，导致页面滚动时出现微小的卡顿

1 个答案: