html - 在处理静态标题和内容容器溢出时，如何在加载不同组件后重置滚动位置？

Question

寻找滚动问题的好的解决方案:)

初始设置

我有一个通用的应用程序结构，如下所示:

• 主容器(应用程序组件 -> 固定 100vh 大小的 div):
  • 标题(带有应用标题和固定大小的 div)
  • 内容(带路由器导出和溢出的 div:自动)- 固定大小 100vh - 标题高度

<div>
  <div class="app-header">
    <app-header></app-header>
  </div>

  <div class="app-content">
    <router-outlet></router-outlet>
    <div class="app-footer">
      <app-footer></app-footer>
    </div>
  </div>
</div>

在内容容器中，我加载了工具组件，它在内部加载了不同的其他小步骤组件。 Step-components 可以根据其内容具有不同的高度。加载步骤组件没有路由更改。

工具组件的结构如下所示:

• 工具组件
  • 步骤组件 1
  • ....
  • 步骤组件 X

工具组件负责不同步骤组件之间的切换。

问题

我遇到的问题是，当其中一个具有较大高度的 step-components 被加载时，我会向下滚动到页面底部(实际上它是一个 app-content 滚动)，然后加载另一个具有相同的高度，我的滚动位置保持在同一个地方。发生这种情况是因为滚动出现在“app-content”容器级别(正是我想要的位置)。

Answer 1

最后，我实现了以下解决方案。

我创建了如下所示的服务 app-scroll.service:

@Injectable({
  providedIn: 'root'
})
export class AppScrollService {

  appComponentScrollToContainerId = 'appComponentScrollToContainerId';
  constructor() { }

  scrollToTop(){
    const container = document.getElementById(this.appComponentScrollToContainerId);
    if(!container){
      throw new Error('Scroll container was not found');
    }
    container.scroll(0, 0);
  }
}

然后我将它注入(inject)到 app.component 中并用它来设置我想要滚动的滚动容器 ID:

<div>
  <div class="app-header">
    <app-header></app-header>
  </div>

  <div class="app-content" [id]="appScrollService.appComponentScrollToContainerId">
    <router-outlet></router-outlet>

    <div class="app-footer">
      <app-footer></app-footer>
    </div>
  </div>
</div>

然后，我会在滚动出现问题的地方注入(inject)此服务，并在需要时调用它。

它也可以在路由更改事件中调用，以备不时之需。

如果有人知道更好的解决方案，请告诉我:)