@qdentabino wrote:
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”>
.
.
.
.
.
.
Posts: 2
Participants: 2