Unable to get scroll events in ion-scroll

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


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?

At this stage, here is the code I use



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


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

import { Scroll } from 'ionic-angular';

  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.scrollElement.addScrollEventListener(($event) => 

    setTimeout(() => {

      console.log('Async operation has ended');
    }, 500);


    console.log('Scroll start');

    console.log('Scroll end');

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



page-home {

    #mainPanel {
        height: 800px;

    #subPanel {
        height: 100%;

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

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>

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?

I managed to get the event working with the following

this.scrollElement.addScrollEventListener((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

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

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”>