Ionic 4 infinite-scroll initial scroll position - ionic-framework

Question

I'm trying to make a dual infinite scroll case when new items are added as the user scrolls either all the way up or all the way down.
<ion-infinite-scroll (ionInfinite)="scrolledUp($event)" position="top">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
<ion-list>
<ion-item *ngFor="let item of items">
<!-- item content -->
<ion-item>
</ion-list>
<ion-infinite-scroll (ionInfinite)="scrolledDown($event)" position="bottom">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
The problem is that the list opens initially at the bottom. Of course I can scrollIntoView the first item on ionViewDidEnter but it wouldn't look nice and would confuse the users.
I noticed it's the one with position=top that is responsible for the initial position at the bottom.
Is there a way to set the initial scroll position for the ion-infinite-scroll without having to explicitly scroll the list to top?

Answer 1

As I initially suspected the infinite scroll component does force a scroll to bottom if position is set to top. It occurs in the componentDidLoad method as shown below:
async componentDidLoad() {
const contentEl = this.el.closest('ion-content');
if (contentEl) {
await contentEl.componentOnReady();
this.scrollEl = await contentEl.getScrollElement();
}
this.thresholdChanged();
this.disabledChanged();
if (this.position === 'top') {
writeTask(() => {
if (this.scrollEl) {
this.scrollEl.scrollTop = this.scrollEl.scrollHeight - this.scrollEl.clientHeight;
}
});
}
}
As the component provides no means to intervene in this behavior and without an option to extend or otherwise customize the default stencil components, I turned to a somewhat hacky way to achieve the desired behavior.
Therefore, you first need to remove the position=top part from the ion-infinite-scroll declaration in your view so that the scroll part of the above code won't trigger. You would also provide a name for the ion-infinite-scroll so that it can be referenced from your page class.
<ion-infinite-scroll #top (ionInfinite)="scrolledUp($event)">
Then you make a reference to #top above in your page.
#ViewChild('top') topScroller;
Then in the ionViewDidEnter life cycle hook, you can set the position for the scroller as top.
setTimeout(() => {
this.topScroller.position = 'top';
}, 200);
It has to be in a time out because the topScroller variable is still not assigned when ionViewDidEnter is called and the next life cycle hook is ionViewWillLeave which won't be that useful for our purpose.