Question

我在回到特定滚动位置时遇到问题。我的ObjectListComponent中有一个延迟加载的对象列表，单击对象名称后，便可以检查其详细信息。有一个返回按钮，它会转到包含对象列表的上一页。问题是ObjectListComponent从一开始就处于初始化状态，我无法返回到之前的状态，即检查特定对象详细信息之前的状态。我需要具有对象的可滚动列表，如果我输入ObjectComponent以便检查其详细信息并想返回列表，那么我将在单个对象位于同一位置的ObjectList上登陆，因此可以向下滚动并加载更多对象。

有一个类似的选项 RouterModule.forRoot（ appRoutes， {scrollPositionRestoration：'disabled'} // <-在这里）

但是我有RouterModule.forChild，它不接受额外的选项作为参数。

Answer 1

我有机会按相同的要求进行工作，并且没有默认配置可以在任何前端框架中支持滚动还原。我已经阅读了很多非常复杂的代码参考。我认为自己开发并以以下方式实施：

首先使用document.documentElement.scrollTop获取滚动位置并映射到对象中的this.router.url（上一个URL）。
返回同一页面后，与上方对象中的url比较并为该页面应用相应位置。
SPA问题：不同页面的异步加载需要花费不同的时间来渲染，因此需要应用滚动位置效果。要解决此问题，我们可以使用setInterval或setTimeout来正确应用滚动位置。
在您的家庭组件中，订阅路由器事件并开始实施

此处：

scrollPos = {};
attempts = 5;
interval: any;
maxAttempts = 5;
scrollRestore() {
this.router.events.subscribe(event => {
if(event instanceof NavigationStart) {
this.scrollPos[this.router.url] = document.documentElement.scrollTop;
}
if(event instanceof NavigationEnd) {
this.scrollPos[event.url] ? 
this.applyScroll(this.scrollPos[event.url]):this.applyScroll(0)
}
});
}

applyScroll(pos) {
 this.interval = setInterval(() => {
  window.scrollTo(0, position);
  this.attempts++;
  this.clearScrollInterval(pos);
}, 30);
}

clearScrollInterval(pos) {
if (this.interval &&
  (this.attempts === this.maxAttempts || document.documentElement.scrollTop >= pos)) {
  clearInterval(this.interval);
  this.attempts= 0;
}
}

子根的滚动位置恢复

1 个答案: