Scroll position on back


#1

I have a long list of items that are links to the next page. I scroll down halfway, and tap an item.

When I press back (I am using the nav-router) the position of the list is set to the top. But I’d like to press back and be taken back to the previous page and previous scroll position.

I think this is because pressing back essentially re-loads the previous page.

Is there an Ionic solution to this problem? Or will I have to roll my own?


Remember tab on back button tap
#2

This is something we will hopefully be able to do with the new nav system that @adam is working on. Stay tuned!


#3

Yup, at a coffee shop writing tests for it right now. I’ll give you a heads up when I get the branch in github.


#4

Cool, this is a big bug bear for PhoneGap-like apps. One of things that give away that its not native…


#5

Did this get in the Ionic code that is now up? Do we have to do anything or will it just work this way (as this is something I really want too)
Thanks!


#6

I’d really like to see this too!

I guess I opened a duplicate for this: Persistent list position / scroll view offset when navigating between pages


#7

Thanks for bringing this back up @alexb @daniel. I’m not entirely sure if it’s added yet, @adam will have more information on this soon… :smile:


#8

This one is quite a challenge because the content and scope gest destroyed between each view. I’ll create an issue so we can keep working on it:


#9

I don’t know if it will help but I threw this together and it feels close (but no cigar).

Basically this directive will capture the state name and position of scroll when you leave the page. It will then store the information in an object in an array in a service.

Then when the view is loaded again (on back for instance) the object in the array in the service is retrieved based on state name and the scroll position is applied.

.directive('keepScroll', function ($filter, $timeout, $state, $ionicScrollDelegate, $scrollPosition) {
  return function ($scope, $element, $attrs) {
    var scrollableElement = $element[0].querySelector('.scroll');
    var view = $filter('filter')($scrollPosition.views, { name: $state.current.name })[0];
    // Save scroll position on view change
    $scope.$on("$stateChangeStart", function () {

      // +++ how do I get this value? ++++
      var position = 0; //

      // Save existing view
      if (view) view.position = position;
      else {
        // Add view to collection
        $scrollPosition.views.push({
          name: $state.current.name,
          position: position
        });
      }
    });

    // Apply scroll position to view
    $timeout(function () {
      
      // +++ this doesn't exist but it would be nice if it did! +++
      if (view) $ionicScrollDelegate.scrollTo(0, view.position, false);

    }, 0);
  }
})

It’s obviously not complete, but I just thought it might be useful if anyone were to tackle this problem.


jQuery style "scroll/scrollto/position" actions for adding/removing css on current position?
Set the scroll position
#10

Sweet @gregorypratt! We will definitely check this out soon. I’m sure @adam will like diving into it.


#11

Following this with interest… @gregorypratt, does this solution work for you? What are the drawbacks?
Also @max and @adam, will this be supported soon?


#12

Yes this is something we’ll be putting into Ionic. // @andytjoslin


#13

Added this morning (this commit).

Ionic now by default remembers the scroll of any page you go back to, using the view history.


Scroll postion memory
#14

If this passes the scrutiny of the community it should get its own entry in the Announcement section of the forum!! :slight_smile:


#15

Yes!!! Can’t wait to test this. Amazing work!!


#16

Just tested it and on first look, its great!

One little thought (that I am sure I can code around, only tested this 5 mins ago)

  1. LIST > Detail
  2. Scroll down detail page a little (as if you are reading something).
  3. Back button to List - NOW at the vertical position you were before you went to detail - Great!
  4. Go into another detail … now you are at vertical position you left 2 in… even though its a NEW detail page so I would prefer to be reading from the top of the new detail page…

So I guess on detail we need to not be scrolling down - or we need a simple scroll to top whenever you go to detail (which I am sure is possible, just not dug out how to do that yet)

Probably more of a documentation thing - make it clear in the list documents how to scroll to top - as I think this could be a cause of support questions otherwise


#17

Good point @alexb! It should only store if going ‘back’ in the history. We’ll reopen the issue and fix it soon.


#18

Yeah thats a better approach!


#19

@alexb fixed. Could you test it out again? Get the latest code from http://code.ionicframework.com nightly build’s zip file.


#20

Looks good! Thank you @andytjoslin