Angular 2配置scrollPositionRestoration为enabled后含Apexcharts组件不生效问题

问题根因 #

Angular自带的scrollPositionRestoration会在路由导航完成、组件初始化完成后立即执行滚动位置恢复，而Apexcharts.js会在组件初始化之后异步渲染图表、动态修改容器高度，此时页面整体高度发生变化，导致之前计算的滚动位置失效，甚至出现页面直接跳到底部的情况。 #

排查步骤&解决方法 #

1. 验证是否为图表动态高度导致的问题 #

先给Apexcharts容器固定高度，排除动态高度干扰：

• 给图表外层DOM添加固定高度样式：.chart-container { height: 400px; overflow: hidden; }
• 在Apexcharts配置中同步指定高度：

public chartOptions = {
  chart: {
    height: 400,
    // 其余配置保持不变
  }
}

修改后测试路由跳转的滚动恢复逻辑，如果正常生效，即可确认是图表动态高度导致的时机问题。 #

2. 手动控制滚动恢复时机 #

由于Angular自带的滚动恢复触发时机早于图表渲染完成时间，推荐关闭自带配置，手动监听渲染完成事件后执行滚动：

1. 先修改app.module.ts中的路由配置，关闭自带滚动恢复：

RouterModule.forRoot(AppRoutes, {
  scrollPositionRestoration: 'disabled',
})

2. 在集成Apexcharts的组件中，监听图表渲染完成事件chartRendered，触发滚动：
   模板代码：

<div class="chart-container">
  <apx-chart 
    [series]="chartSeries" 
    [chart]="chartOptions"
    (chartRendered)="handleChartRendered()"
  ></apx-chart>
</div>

组件逻辑代码：

import { ViewportScroller } from '@angular/common';

constructor(private viewportScroller: ViewportScroller) {}

handleChartRendered() {
  // 直接滚动到顶部，有恢复历史滚动位置需求可自行存储位置后读取
  this.viewportScroller.scrollToPosition([0, 0]);
}

3. 兼容特殊场景的优化 #

如果仍存在滚动时机偏差，可以给滚动逻辑加短延迟，等待DOM高度完全稳定：

handleChartRendered() {
  setTimeout(() => {
    this.viewportScroller.scrollToPosition([0, 0]);
  }, 150); // 延迟时间可根据实际渲染速度调整，建议100-200ms
}

额外排查点 #

• 检查页面是否存在其他异步加载的DOM元素（懒加载图片、动态渲染的列表等），这些元素也会导致页面高度变化，需要等所有异步内容加载完成后再执行滚动。
• 检查全局是否存在自定义的scroll事件监听、锚点自动跳转逻辑，这类逻辑可能会覆盖滚动恢复的执行结果。

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