Ion-infinite-scroll in div doesn't work

Ionic Framework ionic-v3
1

Hi.
My current template is like this.

<ion-content>
<div #1>
some contents…
</div>
<div #2>
some contents…
</div>"
<div #3 style=“height:calc( 100% - 294px );overflow-y:auto;”>
<ion-list>
some ion-items…
<ion-list>
<ion-infinite-scroll>
<ion-infinite-scroll-content>
<ion-infinite-scroll-content>
</ion-infinite-scroll>
</div>
</ion-content>

div#3 must be infinitely scrollable area.
div#1 and div#2 is not scrollable.

Though the ion-list hits the bottom, the infinite scroll event doesn’t fire.
Through debugging, I’ve found that the ion-infinite-scroll binds to ion-content not to div#3.
In IOS, When the whole page scroll hits the bottom, the infinite scroll event does fire!

here is the html source code extracted from the safari debugger .

<ion-content class=“mypage content content-ios has-infinite-scroll statusbar-padding” style="">
<div class=“fixed-content” style=“margin-bottom: 55px;”></div>
<div class=“scroll-content” style=“margin-bottom: 55px;”>
<div#1>
some contents…
</div>
<div#2>
some contents…
</div>
<div #3 style=“background:url(‘assets/img/list_bg.png’);height:calc( 100% - 294px );overflow-y:auto;” ng-reflect-ng-switch=“0”>
<ion-list id=“mypage-list” class=“list list-ios”>
<ion-item>…<ion-item>
<ion-item>…</ion-item>
<ion-item>…</ion-item>
<ion-item>…</ion-item>
</ion-list>
<on-infinite-scroll>
<ion-infinite-scroll-content loadingspiner=“bubbles” loadingtext=“Loading more data…” ng-reflect-loading-text=“Loading more data…” state=“enabled”><div class=“infinite-loading”>
.
.
.
.
.
.

2

It looks like the <ion-infinite-scroll> element is dependent to a <ion-content> element. Take a look into the docs where every <ion-infinite-scroll> is wrapped inside a <ion-content>.

You can also take a look into the source code of the infinite-scroll component here.

I think the reason why this both components are dependet on each other, is the <ion-infinite-scroll> threshold to the bottom of the <ion-content>, which can be customized. Without it won’t work as expected.

So for Your case, without having tried / tested it, could You create a new <ion-content> element inside Your <div>'s, where You wrap Your <ion-infinite-scrolls> inside?

Something like that:

<ion-content>

    <h1>my title</h1>

    <div #1>
        <ion-content>

            <ion-list><!-- initial content here --></ion-list>

            <ion-infinite-scroll>
                <ion-infinite-scroll-content><ion-infinite-scroll-content>
            </ion-infinite-scroll>

        </ion-content>
    </div>

    <div #2>
        <ion-content>

            <ion-list><!-- initial content here --></ion-list>

            <ion-infinite-scroll>
                <ion-infinite-scroll-content><ion-infinite-scroll-content>
            </ion-infinite-scroll>

        </ion-content>
    </div>

    <div #3>
        <ion-content>

            <ion-list><!-- initial content here --></ion-list>

            <ion-infinite-scroll>
                <ion-infinite-scroll-content><ion-infinite-scroll-content>
            </ion-infinite-scroll>

        </ion-content>
    </div>

</ion-content>

I don’t know if this is intended for the architecture of ionic to implement multiple <ion-content>'s, but I don’t see any other “official” solutions.

There should only be one content in a single view component

  • Source: First paragraph here.

Let me know, if it worked.

Cheers
Unkn0wn0x

1 Like
3

how can you solve this? i am using a ng switch and then a ng-container but de infinite scroll, always leaveme a white space in the bottom