Html 增加页眉中的数字会导致页面滚动出现微停顿

我有一个页面标题，动态显示用户滚动浏览的评论数量。请在此处查看它的实际操作：

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

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

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

我确认这是HTML更新的问题，通过删除HTML，但保持观察者和页面滚动恢复到非常平滑。在“重新绘制”标题html时，有没有办法防止这种口吃？谢谢大家!

注意：

我尝试将计数器元素从标题中移出并放入content

div

，只是为了确认这不是一个固定位置的问题，口吃仍然存在

---

谢谢

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

你有没有考虑过取消HTML更新的公告，这样它就不会发生了 直到滚动停止一秒钟

对于那些感兴趣的人来说，Ionic在

标签上有一个

（ionScrollEnd）

事件（所有内容都放在一个页面上），当滚动动画停止时会触发该事件，我只是调用该方法并更新那里的计数，而不是在发生新的交叉事件时尝试立即更新

这修复了抖动：）

  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;
  }