Ionic Refresher triggers on every scroll down

Ionic Framework
1

I am having an issue with my IonicRefresher. It doesnt matter where you are within the list of items, if a user is scrolling up (by swiping down) the refresher is being triggered.

<div class="list-container">
    <ion-content>
      <ion-refresher slot="fixed" (ionRefresh)="loadPreviousEvents($event)" *ngIf="mobile">
        <ion-refresher-content pullingIcon="chevron-down-circle-outline" refreshingSpinner="circles">
        </ion-refresher-content>
      </ion-refresher>
      <div id="Lists" class="lists" scrollY="true">
        <ion-list id="{{item.dateId}}" class="list" *ngFor="let item of sessionDates" lines='none' #{{item.dateId}}>
          <ion-list-header class="list-header">{{item.date}}</ion-list-header>
          <ion-item detail="true" class="list-item" *ngFor="let sessionGroup of item.sessionGroups"

i only want the refresher to be triggered when at the top of the list (like a pull down to load more)

2

Try one or both of these to see if it will fix your issue:

  1. Not wrapping ion-list in another div, as in make it a sibling of ion-refresher.

  2. Not wrapping ion-content in a div.

All I did was look at my own a couple of working ion-refresher in my project and in both cases I’m not wrapping ion-list or the ion-content, I’m guessing this may be the issue.

3

@bchehraz thank man it was not wrapping the ion-list in another div that made it work

1 Like