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

滚动位置恢复

这里涉及两个步骤，

1. 存储 的滚动位置div。导航到另一个页面时。
2. 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;
    }

}