如何重置不同组件加载后的滚动位置，当处理一个静态标题和溢出的内容容器?

Question

寻找一个解决滚动问题的好方法:)

初始设置

我有一个通用的应用程序结构，看起来像这样:

• 主容器(app-component ->Div(固定尺寸100vh):
  • 页眉(div with app-header and fixed size)
  • 内容(div带有router-outlet和overflow: auto) -固定大小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可以根据其内容具有不同的高度． 未更改路由而加载的阶跃组件.

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

• 工具组件
  • Step-Component 1
  • …
  • Step-Component X

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

我遇到的问题是，当一个具有大高度的步骤组件被加载时，然后我向下滚动到页面的底部(实际上它是一个应用程序内容滚动)，然后加载另一个具有相同高度的组件，我的滚动位置仍然在同一个地方。这是因为滚动出现在'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);
}
}

然后我把它注入到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>

然后，我在滚动出现问题的地方注入这个服务，并在需要时调用它。

也可以在路由变更事件中调用，以备需要时使用。

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