Angular 6.1.0 - 恢复滚动位置未按预期工作

Question

RouterModule.forRoot(routes, { scrollPositionRestoration: 'enabled' })

6.1.0 中的此新功能无法按预期工作。 ViewportScroller 服务似乎在填充 DOM 元素之前尝试恢复滚动位置，因此最大滚动高度本质上是设备高度。结果，恢复的滚动位置没有达到预期目的。

我尝试按照文档的建议对自定义滚动位置恢复执行以下操作，但无济于事:

dataObsevable.pipe(withLatestFrom(scrollEvents)).subscribe(([list, e]) => {
  this.data = list;
  if (e.position) {
    viewPort.scrollToPosition(e.position);
  } else {
    viewPort.scrollToPosition([0, 0]);
  }
});

管道化 observable 返回的位置正确地是页面导航之前滚动位置的值。但是，似乎 viewPort.scrollToPosition() 在 DOM 元素完成初始化之前尝试滚动页面，因此它什么都不做。

Answer 1

滚动位置恢复
这里涉及两个步骤，

存储 div 的滚动位置.在导航到其他页面时。

将存储的值分配给 div再次回到页面时。

如果 RouterModule.forRoot(routes, { scrollPositionRestoration: 'enabled' })不起作用，请尝试以下代码:
HTML:
在 div 中添加以下事件您要为其恢复滚动位置

(scroll)="onScroll($event)" [scrollTop]="spt" [scrollLeft]="spl"

成分:

public spt:any;
public spl:any;

onScroll(event: any) {

sessionStorage.setItem('scroll',JSON.stringify({st:event.srcElement.scrollTop,sl:event.srcElement.scrollLeft}));
    
}

  ngOnInit() {

    if(sessionStorage.getItem('scroll'))
    {    
      //console.log("scrollTop available")
      var sp=JSON.parse(sessionStorage.getItem('scroll'));
      this.spt=sp.st;
      this.spl=sp.sl;
    }

}