Unable to get scroll events in ion-scroll

Ionic Framework ionic-v3
1

Hi, I try to make a page like the following one for my application (using ionic 3.3.0)

image

The right panel displays a list of articles coming from my web server.
The left panel displays the content of the article I clicked on the right panel.

I used an ion-grid to get this design.
Left panel has to be vertically scrollable (includes an ion-scroll).
So does right panel.
And I would like to get something like an infinite scroll on right panel (otherways the application is quite slow).

I can subscribe to scroll events for ion-content but that’s was not very helpful in this case.
It did not let me know when right panel comes to the bottom.

I tried to subscribe to scroll events on ion-scroll without success.

What would be the right way to design the page to be warned when right panel scrolls to bottom (infinite-scroll) but not when left panel scrolls to bottom?

2

At this stage, here is the code I use

home.html

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding (ionScroll)="onScroll($event)" (ionScrollStart)="onScrollStart($event)" (ionScrollEnd)="onScrollEnd($event)">
  <ion-grid>
    <ion-row>
      <ion-col width-75 id="mainPanelCol">
        <ion-scroll scrollY="true" direction="y" overflow-scroll="true" id="mainPanel">
          <div>
            <h3>Some text here</h3>
          </div>
        </ion-scroll>
      </ion-col>
      <ion-col width-25 id="rightPanelCol">
        <ion-scroll #scrollElement name="scrollElement" scrollY="true" direction="xy" overflow-scroll="true" id="subPanel">
          <ion-list>
            <ion-item *ngFor="let item of itemsToDisplay; let i = index" detail-none
              text-wrap>
              <p>Item {{i}}</p>
            </ion-item>
          </ion-list>
          <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
            <ion-infinite-scroll-content></ion-infinite-scroll-content>
          </ion-infinite-scroll>
        </ion-scroll>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

home.ts

import { Component, ViewChild } from '@angular/core';
import { NavController } from 'ionic-angular';

import { Scroll } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  @ViewChild(Scroll) scrollElement: Scroll;

  items: any;
  itemsToDisplay: any;
  index: any;

  constructor(public navCtrl: NavController) {
    this.items = [];
    this.itemsToDisplay = [];
    this.index = 0;

    for (var i = 0 ; i < 200 ; i++)
    {
      let item = {
        body: 'Body ' + i,
        title: 'Title ' + i 
      };

      this.items.push(item);
    }

    this.addItems();
  }

  ionViewDidLoad()
  {
    console.log(this.scrollElement);
    this.scrollElement.addScrollEventListener(($event) => 
    {
      console.log('Event');
    });
  }

  doInfinite(event)
  {
    console.log('Scroll');
    setTimeout(() => {

      this.addItems();
      console.log('Async operation has ended');
      event.complete();
    }, 500);
  }

  onScroll(event)
  {
    console.log('Scroll');
  }

  onScrollStart(event)
  {
    console.log('Scroll start');
  }

  onScrollEnd(event)
  {
    console.log('Scroll end');
  }

  addItems()
  {
    this.index += 20;
    if (this.index > this.items.length) {
      this.index = this.items.length;
    }
    this.itemsToDisplay = this.items.slice(0, this.index);
  }

}

home.scss

page-home {

    #mainPanel {
        height: 800px;
    }

    #subPanel {
        height: 100%;
    }
}

Unfortunately I am not able to trigger event when I scroll the right panel…

3

Did you ever get this working?

I’m having a similar problem where the ionScroll event is working fine for <ion-content> but is not firing at all for <ion-scroll>

4

No, I did not find a solution to make event working on ion-scroll.
I had to change my layout to avoid the problem.

Did you find a solution?

5

I managed to get the event working with the following

this.scrollElement.addScrollEventListener((e) => {
      console.log(e);
    })

However the scroll event is a lot more limited than the one on <ion-content> , it doesn’t have as many properties or functions so I had to scrap it ionScroll event doesn’t fire on ion-scroll

6

I am getting same problem. Can some one get a workaround?

7

I have to allow the scroll event of ion-content. set the property scroll-events=“true”
<ion-content padding (ionScroll)=“onScroll($event)” (ionScrollStart)=“onScrollStart($event)” (ionScrollEnd)=“onScrollEnd($event)” scroll-events=“true”>
…
…
</ion-content