InfiniteScroll _onScroll event not fired while scrolling

I tried ion-infinite-scroll for my grid pagination. But it is not working as _onScroll event not being fired while scrolling. We are using ionic 2.

Do you have some code output for us to work with? How does your template look like?

Hi Luukschoen,

Thanks for quick reply.

Here is the html which I am using to generate grid:

      <ion-row [class.search-container-after-search]="!beforeSearch" [class.search-container-before-search]="beforeSearch">
        <label class="item item-input">
          <i class="icon-magnifyingglass filter-image"></i>
          <input type="text" [(ngModel)]="searchText" (keyup)="searchTimeEvent()"/>
        </label>
      </ion-row>


      <ion-grid>
        <ion-row>
          <ion-col>
              <div class="display-stock-table">
               /*Grid Header*/
                <li class="title-row">
                  <div class="trunc">{{'Stock.code' | sgTranslatePipe}}</div>
                  <div class="trunc">{{'Stock.description' | sgTranslatePipe}}</div>
                  <div class="trunc">{{'Stock.itemTypeName' | sgTranslatePipe}}</div>
                  <div class="trunc">{{'Stock.brand' | sgTranslatePipe}}</div>
                  <div class="trunc">{{'Stock.storeCode' | sgTranslatePipe}}</div>
                  <div class="trunc">{{'Stock.storeName' | sgTranslatePipe}}</div>
                  <div class="trunc">{{'Stock.quantity' | sgTranslatePipe}}</div>
                  <div class="trunc">{{'Stock.unit' | sgTranslatePipe}}</div>
                  </li>
                 /* List of grid rows */
                <li *ngFor="let stock of stockItems">
                  <div class="trunc">{{stock.code}}</div>
                  <div class="trunc">{{stock.name}}</div>
                  <div class="trunc">{{stock.itemType}}</div>
                  <div class="trunc">{{stock.brand}}</div>
                  <div class="trunc">{{stock.storeCode}}</div>
                  <div class="trunc">{{stock.storeName}}</div>
                  <div class="trunc">{{stock.quantity}}</div>
                  <div class="trunc">{{stock.unit.name}}</div>
                </li>
              </div>
          </ion-col>
        </ion-row>
      </ion-grid>
      <ion-infinite-scroll (ionInfinite)="doInfinite($event)" *ngIf="!isScrollingEnded">
          <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">
          </ion-infinite-scroll-content>
      </ion-infinite-scroll>
  </div>
 </ion-content>

Best Regards,
Satya

Okay, and what version of Ionic are you on (not the CLI, but the framework). It’s listed in your package.json

I would perhaps start with moving the infinite scroll component outside of the div, as te last item of your ion-content btw

These are the ionic framework versions I found in my package.json

“ionic-angular”: “2.1.0”,
“ionic-native”: “2.2.11”,

Okay thanks. Did you already move the infinite scroll outside of the div and made it the last item of the ion-content? Does your doInifite($event) function is called at all or not?

Yes I tried moving the infinite scroll outside of the div but still facing the same issue, also the doInifite($event) is not being called.

When I tried debugging the _onScroll() event (in infinite-scroll.js) is not being called while scrolling on the grid, which has the ‘ionInfinite’ event emitted.

Okay, and you’re not getting any errors in your console.log? What happens when removing the ngIf? Perhaps the scroll binding is broken because it wasn’t bound to the view in the first place.

No I am not getting any error in the console log. Also I removed the ngIf but still there is no luck.

And what about stripping down your HTML? Just an *ngfor loop over some items and the infinitescroll. I’m trying to figure out whether it has something to with stuff you’re doing or if you’re suffering from some kind of weird issue/bug. What abou trying it in a new project? Does the scroll event fire when you have a clean project?

You shouldn’t use the ngIf at all I think. The infinitescroller can determine on it’s own if you’re done scrolling. If your purpose is to disable the infinite scroller, use the enabled input property.

We have a modal window which holds similar kind of grid where the infinite scroll is working good.
The component where it is not working has a navigation pane on the left side and grid on the right side. Does this kind of layout have any impact on scrolling which is finally blocking infinite scroll?

We have a search bar on the top of the grid which results 50 records initially.And later we expect the remaining records(50 at a time) on scrolling with a REST call. The ngIf is to find out that there are no more records and stop the scrolling with the help of boolean ‘isScrollingEnded’.

Okay, I can understand what you’re trying to achieve, but wouldn’t it be cleaner to just bind the enabled to a property in your typescript which blocks the ion-infinite scroll when a certain value is reached (with isScrollingEnded)

Yes I will try to bind the enabled propertyinstead of using ngIf. But I guess my problem still remains.

Okay, I’m not sure. But it shouldn’t matter as far as I know.

I’m afraid so too. What about if you move the other infinite scroller (From the modal) to the page where it isn’t working?

If possible can you help me in finding out the reason behind _onScroll not being fired while scrolling.