Ionic-framework: Retain Scroll Position On List Reload

[calendee]

We need a mechanism to retain scroll position after returning from a detail view when data is reloaded from a service. The current implementation only works when the controller has the list data pre-defined in the scope.

See this sample where the controller reloads the data from a service instead of having embedded in controller.

Sample : http://codepen.io/SatadruBhattacharjee/pen/jsLtb

References :
http://forum.ionicframework.com/t/on-coming-back-from-details-to-list-page-the-scroll-position-goes-back-on-top-list-data-loaded-by-async-task/1432/2

http://forum.ionicframework.com/t/save-list-view-state/1554/2

[ajoslin]

Prerequisite issue: #565

How about: Every time a scrollView's associated ScrollController is created, it will:

1. Check if this scroll element is part of a view in the viewHistory
2. If so, setup a listener that, when the element is destroyed, will save the scroll (using the current view's id as the index)

Then $ionicScrollDelegate has a function that will try to load a saved scroll position (using current view's id).

$ionicScrollDelegate#scrollToRememberedPosition([shouldAnimateToPosition])

@calendee @adamdbradley @mlynch any ideas for a less verbose name than that ^?

Usage example (after implementing #565):

function MyCtrl($scope, $ionicScrollDelegate, DataService) {
  var delegate = $ionicScrollDelegate($scope);
  DataService.loadData().then(function() {
    delegate.scrollToRememberedPosition();
  });
}

[adamdbradley]

.lastScrollPosition() ?

[calendee]

Less verbose? That's tiny. I always go big : delegate.scrollToThePlaceYouRememberedEarlierWhenThereWasDataInThisList

Seriously - Adam's suggestion is good.

[ajoslin]

The name needs to emphasize remembering _and_ scrolling to the last position, though.

I don't think it's best to make users do: delegate.scrollTo(delegate.lastScrollPosition());

delegate.scrollToPreviousPosition()? I think last is also too vague, because it could mean the user's last action, not the last action last time the page was loaded.

[mjason3]

related to this issue, is it possible that back with the original page keep the same status. e.g. an input box w/ content still there, a photo kept there w/ original zoom level?

[ajoslin]

Added via 5a0efecef6ea2c4f89c6dfd3cbe98a98614a6e17

The first scrollView underneath a newly loaded view will remember that view's history based on that view's id.

However, any other scroll view needs its own id association to save its scroll by - so when the scroll view is recreated we know _which_ saved scroll position to use.

So here's an example of how you could save scroll position on an arbitrary <ion-scroll> element.

<ion-scroll ng-controller="MyCtrl">
  Hi!
</ion-scroll>

function MyCtrl($scope, $ionicScrollDelegate) {
  var delegate = $ionicScrollDelegate($scope);
  delegate.scrollToRememberedPosition('my-scroll-id');

  //saves scroll based on id on $destroy
  delegate.rememberScrollPosition('my-scroll-id');
}

WIP Documentation: http://ajoslin.github.io/docs/nightly/api/service/$ionicScrollDelegate#rememberScrollPosition

[cozzbie]

How can this be implemented in ionic 2? I'd like my list to stay at the same even after the items have been loaded in the background.

[erperejildo]

And what about Ionic 3?

[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.