Ion-list auto scrolls to top when updated

Ionic Framework Ionic Angular
1

I have an ion-list with an *ngFor. Previously, if I would scroll down the list and then reload the scope array bound to the *ngFor, it would populate with the new data, but the scroll position would not change.
Since upgrading to ionic 6 when the array is reloaded, the ion-list auto-scrolls to the top.

Any help would be appreciated.

using:

Ionic:

Ionic CLI : 6.18.1 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 6.0.4
@angular-devkit/build-angular : 13.2.5
@angular-devkit/schematics : 13.0.4
@angular/cli : 13.0.4
@ionic/angular-toolkit : 5.0.3

Capacitor:

Capacitor CLI : 3.4.0
@capacitor/android : not installed
@capacitor/core : 3.4.0
@capacitor/ios : 3.4.0

Utility:

cordova-res : 0.15.4
native-run : 1.5.0

System:

NodeJS : v16.13.2 (/usr/local/bin/node)
npm : 8.1.2
OS : macOS Monterey

1 Like
2

Hi, I have the same problem on IOS only, did you find a solution ?

3

It is happening on both iOS and Android platforms. Have not found a solution yet. Most work around involve scrollToPoint which is ok but not ideal.

4

Things could be caused by the way you change the content of the array and then how the change detector handles it

5

I am fetching the content from an API call, and then reassign the scope variable:

$scope.list = responsefromAPI

this used to just repopulate the array and not change the scroll. now it auto-scrolls to the top

6

I think then you are reassigning an array which causes angular to think there is sonething really new. That causes an expensive rerender and possibly a scrolltotop

Consider keeping the old array and replacing the difference within that array?

Then the change detection may not struggle that much

7

Any update ? I have the same problem. when updating view asynchronously scroll snaps to the top.

1 Like
8

this one works for me: angular - How to use `trackBy` with `ngFor` - Stack Overflow

9

I have the same issue. My app got a ion-list and a ion-modal popup for editing when click on a list item. and i found that i issue is not caused by update to the list, but caused by the event of entering edit mode when the keyboard panel shows up.

this issue only occurs on mobile, when you test it in a browser on a computer, you cant reproduce it.

i set the height of the modal to 50% so that i can see how the list go back to top in the background. and found that, when i click on the editor which is a textarea to enter edit mode, the list go back to top immediately, please notice i dont even type anything or make any change to the content in the editor. and if i dont click on the editor to enter edit mode but just click return to dismiss the modal, the list stay the same position.

the post was from 2 years ago, hope the team have already cooked up a solution.

btw, i am using ionic vue.

10

so i found a weird solution from ionic’s github. put the following style in the global styles:

.backdrop-no-scroll {
  ion-content {
    --overflow: hidden;
  }
}

dont know how it solved the problem, but it just did. probably when the keyboard panel shows up, the ion-content section is pushed and overflowed so it rerenders completely so it seems like jump back to the top. now that we set it hidden when overflow, it doesn’t need to rerender anymore and so it stay at where it is.