如何避免使用JavaScript setInterval时滚动条自动回到顶部？

嘿，这个问题我之前做数据可视化项目时也踩过坑！大概率是你在更新折线图的过程中，不小心触发了页面滚动重置的行为，我整理了几个常见原因和对应的解决办法，你可以逐一排查：

• 图表容器尺寸突变导致布局重排
  如果你的图表容器没有设置固定的宽高，当数据更新时，图表可能会重新计算尺寸，导致页面布局发生变化，进而触发滚动条回到顶部。
  解决办法：给图表容器设置明确的固定宽高，避免布局重排：

  .chart-container {
    width: 100%; /* 或者固定像素值，比如800px */
    height: 450px;
    overflow: hidden;
  }
  

• 不小心调用了滚动相关方法
  检查一下你的更新代码里，有没有误写window.scrollTo(0, 0)、document.documentElement.scrollTop = 0这类强制滚动到顶部的代码，可能是复制示例代码时带进来的，或者某些工具函数里隐藏了这类逻辑。
  解决办法：全局搜索代码中的scrollTo、scrollTop关键词，删掉不必要的滚动调用。

• 直接替换DOM导致页面重置
  如果你的更新逻辑是通过innerHTML或者重新创建图表DOM元素来更新内容，这种操作会破坏原有DOM结构，有时候会导致浏览器重置滚动位置。
  解决办法：使用图表库提供的数据更新API来更新数据，而不是重建DOM。比如用ECharts的话，就用chartInstance.setOption({ series: [{ data: newData }] })；用Chart.js的话，用chart.data.datasets[0].data = newData; chart.update();。这种方式只会更新图表数据，不会触动页面其他部分。

• 元素自动获取焦点触发滚动
  有时候页面中其他元素（比如某个隐藏的输入框）在图表更新时意外获得焦点，浏览器会自动滚动到该元素位置，看起来像是回到了顶部。
  解决办法：检查代码中有没有element.focus()的调用，或者给可能自动聚焦的元素添加autofocus="false"属性，避免不必要的聚焦行为。

你可以先从检查图表容器样式和更新API的使用开始，这两个是最常见的原因，应该能解决你的问题！

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