调用Chart.js的update()更新图表时页面自动回到顶部该如何解决

核心原因 #

你当前的写法失效是因为Chart.js默认的更新动画是异步执行的，你同步设置滚动位置时，图表的动画渲染、DOM高度重排还未完成，后续的重排操作会覆盖你提前设置的滚动位置。

可用解决方案 #

方案1：关闭更新动画（最简单） #

直接给update方法传入0作为动画时长，让更新同步执行，你的原有逻辑即可正常生效：

let pos = $(document).scrollTop();
// 传入0禁用动画，更新同步完成
this.chart.update(0);
$(document).scrollTop(pos);

方案2：保留动画，在动画完成回调中设置滚动位置 #

如果需要保留更新动画效果，可以在update的配置项中指定动画完成回调，等图表渲染完全结束后再重置滚动位置：

let pos = $(document).scrollTop();
this.chart.update({
  duration: 750, // 保持默认动画时长即可，可自定义
  animation: {
    onComplete: () => {
      $(document).scrollTop(pos);
      // 重置回调，避免影响后续默认动画的执行
      this.chart.options.animation.onComplete = null;
    }
  }
});

额外排查点 #

如果以上方案仍未解决，可排查两个常见场景：

• 触发更新操作的元素如果是href="#"的a标签，点击时默认会触发页面跳顶，需要在点击事件中添加e.preventDefault()阻止默认行为，或改用button标签作为触发按钮。
• 如果你的页面滚动容器不是全局document，而是自定义的overflow: auto的div元素，需要对应修改滚动位置的读写对象，替换为你的滚动容器选择器即可：let pos = $('#你的滚动容器ID').scrollTop();

内容的提问来源于stack exchange，提问作者Eric Wittle