Question

I'm doing something
I'm writting a book

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

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

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

管道可观察对象返回的位置正确地是从页面导航之前的滚动位置的值。但是，似乎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;
}

}

Answer 2

将其添加到您的app.component.ts文件中即可。

export class AppComponent {
  constructor(router: Router, viewportScroller: ViewportScroller) {
    router.events.pipe(
      filter((e: Event): e is Scroll => e instanceof Scroll)
    ).subscribe(e => {
      if (e.position) {
        // backward navigation
        viewportScroller.scrollToPosition(e.position);
      } else if (e.anchor) {
        // anchor navigation
        viewportScroller.scrollToAnchor(e.anchor);
      } else {
        // forward navigation
        viewportScroller.scrollToPosition([0, 0]);
      }
    });
  }
}

此行为的原因是页面尚未呈现，scrollToPosition无效。没有超时的好办法，但是它可以工作。 DrDager

注意

Angular实际上对此问题有open issue

Answer 3

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

将此更改为

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

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

3 个答案:

注意