Detect Scrolling Event

Ionic Framework ionic-v3
1

Hi All,

I am trying to run an event that detects when the user scrolls to the bottom of the page.

I have the following code, but it results in an error:

No provider for Content!

My code is based on the Ionic 2 Content documentation:

.ts file

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

  @ViewChild(Content) content: Content;
  private app: App = null;

  constructor(content: Content, app: App) {
    this.content = content;
    this.app = app;
  }

  ngAfterViewInit() {
    this.content = this.app.getComponent('search-content');
    this.content.addScrollListener(this.onPageScroll);
  }

  onPageScroll() {
    console.log('They see me scrolling...');
  }

.html file

<ion-content padding class="search" id="search-content">

If anyone could advise what I am doing wrong, I would appreciate it.

Note:

  1. The Ionic 2 Content documentation suggests to use addScrollEventListener(handler), but it doesn’t seem to exist on Content, so I have used addScrollListener(handler) instead. Unless I am importing the wrong Content object?

  2. The Ionic 2 Content documentation suggests to use IonicApp, but I can’t find it anywhere, so I am using App instead. Is this incorrect?

  3. I am using Ionic version 2.0.0-beta.32.

As you can see, I have a little confusion about my imports I think.

2

am i missing something or do you have not @Component(…) export MyClass {} around your code?

3

Hi bengtler,

Thanks for the response.

I do, I just gave parts of my code I though relevant to make it easier to read. Here is my full code (note: scrolling objects are commented out so that it doesn’t get the error):

// import { Component, ViewChild } from '@angular/core';
// import { NavController, Loading, App, Content } from 'ionic-angular';
import { Component } from '@angular/core';
import { NavController, Loading } from 'ionic-angular';
import { EmployeeService } from '../service/EmployeeService';
import { UtilityService } from '../utils/UtilityService';
import { Employee } from '../model/Employee';

@Component({
  templateUrl: 'build/pages/search/search.html',
  providers: [EmployeeService, UtilityService]
})

export class SearchPage {

  // @ViewChild(Content) content: Content;
  // private app: App = null;
  private MAX_RESULTS: number = 10000;
  private firstResult: number = 0;
  private nav: NavController = null;
  private loading: Loading = Loading.create();;
  private employeeService: EmployeeService = null;
  private utilityService: UtilityService = null;
  private employeeModel: Employee = null;
  private employeeModels: Employee[] = null;

  constructor(nav: NavController, employeeService: EmployeeService, utilityService: UtilityService) {
//  constructor(content: Content, app: App, nav: NavController, employeeService: EmployeeService, utilityService: UtilityService) {
    // this.content = content;
    // this.app = app;
    this.nav = nav;
    this.employeeService = employeeService;
    this.utilityService = utilityService;
    this.getEmployeeRange(this.firstResult, this.MAX_RESULTS);
  }

  // ngAfterViewInit() {
  //   this.content = this.app.getComponent('search-content');
  //   this.content.addScrollListener(this.onPageScroll);
  // }

  // onPageScroll() {
  //   console.log('They see me scrolling...');
  // }

  getEmployeeRange(firstResult: number, MAX_RESULTS: number) {
    this.employeeModels = this.employeeService.getEmployeeRange(firstResult, MAX_RESULTS, this.nav, this.loading);
  }

  getEmployeeList() {
    this.employeeModels = this.employeeService.getEmployeeList(this.nav, this.loading);
  }

  getEmployee(id: number) {
    this.employeeModel = this.employeeService.getEmployee(id, this.nav, this.loading);
  }

  formatEmployee(employeeModel: Employee) {
    if (employeeModel.avatar) {
      employeeModel.avatar64 = decodeURIComponent(window.atob(employeeModel.avatar));
    }
    this.lastAccessDate(employeeModel);
  }

  lastAccessDate(employeeModel: Employee) {
    employeeModel.time = this.displayTime(employeeModel.lastAccessDate);
  }

  displayTime(lastAccessDate: number) {
    var now: number = new Date().getTime();
    var timeDiff: number = now - lastAccessDate;
    timeDiff /= 1000;
    var seconds = Math.round(timeDiff % 60);
    timeDiff = Math.floor(timeDiff / 60);
    var minutes = Math.round(timeDiff % 60);
    timeDiff = Math.floor(timeDiff / 60);
    var hours = Math.round(timeDiff % 24);
    timeDiff = Math.floor(timeDiff / 24);
    var days = Math.round(timeDiff % 7);
    timeDiff = Math.floor(timeDiff / 7);
    var weeks = timeDiff;

    var returnString = weeks + "w " + days + "d";
    if (weeks <= 0) {
      returnString = days + "d " + hours + "h";
      if (days <= 0) {
        returnString = hours + "h " + minutes + "m";
        if (hours <= 0) {
          returnString = minutes + "m";
          if (minutes <= 0) {
            returnString = "<1m";
          }
        }
      }
    }

    return returnString;
  }
}
4

Hi @richardmarais

On the bottom is a Plunkr for your problem based on the conversation at

Hope it helps!

1 Like
5

Do you guys have a solution for detecting the horizontal scroll view end. I have to call a function on horizontal scroll view end… but not sure how to do this.

6

Hi,
Nice discussion. I also start an event and facing same problem. Thanks for sharing the solution. Besides all of this, I am working in JS Sourcing company. Our company provides inspection service in China. For more information visit: Best China inspection services