v4 scroll position is not restored

[coonmoo]

Bug Report

Ionic Info

Ionic:

   ionic (Ionic CLI)          : 4.0.0-rc.9 (C:\Users\xxxx\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework            : @ionic/angular 4.0.0-alpha.7
   @angular-devkit/core       : 0.7.0-rc.0
   @angular-devkit/schematics : 0.7.0-rc.0
   @angular/cli               : 6.1.0-rc.0
   @ionic/ng-toolkit          : 1.0.0-rc.9
   @ionic/schematics-angular  : 1.0.0-rc.9

System:

   NodeJS : v10.5.0 (C:\Program Files\nodejs\node.exe)
   npm    : 5.2.0
   OS     : Windows 10

Describe the Bug The scroll position is not restored when navigating back from a page. If you scroll down a list and then navigate to a detail page and then hit the back button, the scroll position on the originating page is set back to [0, 0], basically loosing the context. This behaviour is really bad for the user experience.

Steps to Reproduce

1. Run ionic serve
2. On home page wait until the list loads and scroll down to e.g. to the last list entry.
3. Click on the list entry and then navigate back from the detail page to the home page.
4. After navigating back the scroll position is set to [0,0], the previously scroll state is not restored.

Related Code Example reproduction: https://github.com/coonmoo/IonicScrollPosBug

Expected Behavior The scroll position should be correctly restored when navigating back from a page.

Additional Context I tried to fix it with the latest Angular 6.1.0 feature of scrollPositionRestoration, but it does not seem to work. Angular's ViewportScroller always reports [0,0] scroll position when navigating back. I suppose that is an Ionic issue, because using plain Angular it seems to work (see also https://github.com/angular/angular/issues/24547).

[MarkChrisLevy]

@coonmoo Because ionic uses its own content scrolling component ion-scroll, there has to be implementation of ViewportScroller (angular/common), that will handle scroll position restoration. Angular's default implementation uses window's scroll and that is the reason why it is not working with ionic right now. So, for now, you can implement your very own ViewportScroller and provide in your app module, hopefully ionic will have it implemented as well someday :-)

[coonmoo]

Thanks alot! Your implementation of the ViewportScroller so far rworks like a charm!

Anyway, would be nice to have Ionic providing an implementation, since this is a crucial requirement for most apps.

[bashoogzaad]

What is the latest status of this? Should I implement a ViewPortScroller or are you guys at Ionic working on a solution?

[rdlabo]

+1 I also want to know about this Issue.

[ptitjes]

@coonmoo Would you mind to share your implementation of ViewPortScroller ?

[naveedahmed1]

Any update on this?

[joanroig]

Seems like I have the same issue, I've described it here: https://forum.ionicframework.com/t/ionic-4-returning-to-previous-page-loses-scroll-position/140886 After some research, I've tried the same scrollPositionRestoration as @coonmoo with no success in lastest version 4.0.0-beta.7

[joanroig]

My current workaround for this: https://github.com/joanroig/Ionic4-restore-scroll-position

[mhartington]

Hey yall, just chiming in on an update for this.

1) Why is this happening.

In 6.1 of ngRouter, there was a new API in place for restoring scroll position. Only issue is that the API used the document body to work with scrolling. While this works for typical Angular Apps, it does not work with nested scroll containers, like ion-content.

2) What can be done.

Similar to how we override the router RouteReuseStrategy class, we can do the same thing for the ViewportScroller API. This is what I'm working on currently and hope to have something to present soon.

[ptitjes]

@mhartington That's great to hear ! :P Will this support multiple nested ion-content ?

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.