Cannot read property `contentHeight` of Undefined in Ionic 2

Question

I need to get the scrollTop position in my Ionic 2 page, but it is just not working using simple jQuery.

Checkout my working example below, scroll the page and click on it, it will give you the y position number.

 $("body").click(function(){ var scrollPost = $(document).scrollTop(); alert(scrollPost); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> test<br/><br/><br/><br/>kjh<br/>kjgh<br/>uitz<br/><br/><br/><br/>uztjhg<br/>kjh<br/> test<br/><br/><br/><br/>kjh<br/>kjgh<br/>uitz<br/><br/><br/><br/>uztjhg<br/>kjh<br/>test<br/><br/><br/><br/>kjh<br/>kjgh<br/>uitz<br/><br/><br/><br/>uztjhg<br/>kjh<br/>test<br/><br/><br/><br/>kjh<br/>kjgh<br/>uitz<br/><br/><br/><br/>uztjhg<br/>kjh<br/>test<br/><br/><br/><br/>kjh<br/>kjgh<br/>uitz<br/><br/><br/><br/>uztjhg<br/>kjh<br/>test<br/><br/><br/><br/>kjh<br/>kjgh<br/>uitz<br/><br/><br/><br/>uztjhg<br/>kjh<br/>test<br/><br/><br/><br/>kjh<br/>kjgh<br/>uitz<br/><br/><br/><br/>uztjhg<br/>kjh<br/>test<br/><br/><br/><br/>kjh<br/>kjgh<br/>uitz<br/><br/><br/><br/>uztjhg<br/>kjh<br/> <div class="test">Thats a test</div> 

But jQuery method to get scrollTop does not work, it always return 0.

So I have planned to get it using the ionic way, documentation here

I am trying to use dimensions.contentHeight , dimensions.contentTop , but getting error. Below is my code.

home.html code:

<ion-content content>
    <div #topScroll>
  The world is your oyster.
  test<br/><br/><br/><br/>kjh<br/>kjgh<br/>uitz<br/><br/><br/><br/>uztjhg<br/>kjh<br/>
  test<br/><br/><br/><br/>kjh<br/>kjgh<br/>uitz<br/><br/><br/><br/>uztjhg<br/>kjh<br/>test<br/><br/><br/><br/>kjh<br/>kjgh<br/>uitz<br/><br/><br/><br/>uztjhg<br/>kjh<br/>test<br/><br/><br/><br/>kjh<br/>kjgh<br/>uitz<br/><br/><br/><br/>uztjhg<br/>kjh<br/>test<br/><br/><br/><br/>kjh<br/>kjgh<br/>uitz<br/><br/><br/><br/>uztjhg<br/>kjh<br/>test<br/><br/><br/><br/>kjh<br/>kjgh<br/>uitz<br/><br/><br/><br/>uztjhg<br/>kjh<br/>test<br/><br/><br/><br/>kjh<br/>kjgh<br/>uitz<br/><br/><br/><br/>uztjhg<br/>kjh<br/>test<br/><br/><br/><br/>kjh<br/>kjgh<br/>uitz<br/><br/><br/><br/>uztjhg<br/>kjh<br/>
  <div class="test">Thats a test</div>
</div>
</ion-content>

Edit 1

home.ts code updated

home.ts code:

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

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

    export class HomePage implements AfterViewInit  {

      @ViewChild(Content) content: Content;
    constructor(private renderer: Renderer2, public navCtrl: NavController) {       
    }

ngAfterViewInit() {

    // Renderer2 used not Renderer, inject it before using
    this.renderer.listen('document', 'click', (e) => {
      // Get contentHeight here
      var iscroll =  this.content.contentHeight;
// error - Property 'dimensions' does not exist on type 'Content'
      var iscroll2 = this. content.dimensions.contentHeight;
      alert(iscroll);
      alert(iscroll2);
    });
    }

Error coming - cannot read property contentHeight of Undefined.

What am I doing wrong?

Answer 1

You have multiple issues here:

• You're using a jQuery click handler
• You're using content and not #content in the template

I'd do:

<ion-content #content><!-- omitted content --></ion-content>

// Make sure to import AfterViewInit and implement it
ngAfterViewInit() {

  // Renderer2 used not Renderer, inject it before using
  this.renderer.listen('document', 'click', (e) => {
    // Get contentHeight here
  });
}