Ionic Pull to Refresh (Refresher) Inside an Element

Question

Is it possible to implement Ionic's pull to refresh (aka "Refresher") inside of an element instead of on an entire page?

This would be useful when designing an app that has a smaller scrollable section within a page. With the current behavior, the entire page is pulled down rather than just the scrollable element.

Answer 1

Have you tried ion-scroll inside ion-content in your section and put the refresher inside ?

Answer 2

Do you mean something like this?

<div id='smaller-scrollable-section'>

    <ion-content>

        <ion-refresher (ionRefresh)="doRefresh($event)">
            <ion-refresher-content></ion-refresher-content>
        </ion-refresher>

        <ion-list>
            <ion-item *ngFor="let item of collection">
            </ion-item>
        </ion-list>

        <ion-infinite-scroll (ionInfinite)="fetchMore($event)">
            <ion-infinite-scroll-content></ion-infinite-scroll-content>
        </ion-infinite-scroll>

    </ion-content>

</div>

Answer 3

Actually you can do this, but it is more a workaround than a really nice solution. ion-refresher components can only be used in ion-content.

So you are able to put another ion-content in your page.

<ion-content padding>
    <div>
        <!-- Your other content -->
    </div>

    <!-- Additional ion-content -->
    <ion-content>
        <!-- Your inline ion-refresher -->
        <ion-refresher></ion-refresher>
    </ion-content>
</ion-content>

You need to put every ion-refresher into a new ion-content, because the ion-refresher component will be put at the end of the scroll-content container, that is generated in ion-content.

Just note, that you wont be able to use a full page ion-refresher with an in page ion-refresher, because both will be executed, when you try to pull the in page ion-refresher:

<ion-content padding>
    <ion-refresher></ion-refresher>

    <!-- Your other content -->

    <ion-content>
        <ion-refresher></ion-refresher>
    </ion-content>
</ion-content>

Answer 4

You can do by using ion-scroll. The sample code given below:

<ion-content>
    <div class="row">
        <p class="col-sm-12">This text will display on top</p>
    </div>

    <div class="row"> 
        <div class="col-sm-6">
            <ion-scroll>
              <ion-refresher>
              </ion-refresher>
              <p class="col-sm-12">This text will be under ion-refresher pull refresh</p>
            </ion-scroll>
        </div>
        <div class="col-sm-6">
            <p class="col-sm-12">This text will display on center right</p>
        </div>    
    </div> 
    <div class="row">
        <p class="col-sm-12">This text will display on bottom</p>
    </div>
<ion-content>

Also please check the image, only blue content portion will be under ion-refresher. Other section will be outside the refresher.