Question

我需要在Ionic 2页面中获得scrollTop位置，但是使用简单的jQuery却无法正常工作。

在下面查看我的工作示例，滚动页面并单击它，它将为您提供y职位编号。

$("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>

但是获取scrollTop的jQuery方法不起作用，它总是返回0。

所以我计划使用离子方式documentation here

来获得它

我正在尝试使用 dimensions.contentHeight ， dimensions.contentTop ，但出现错误。下面是我的代码。

home.html 代码：

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

编辑1

home.ts代码已更新

home.ts 代码：

    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);
    });
    }

即将到来的错误-无法读取未定义的属性contentHeight。

我在做什么错了？

Answer 1

您在这里遇到多个问题：

您正在使用jQuery点击处理程序
您在模板中使用content而不是#content

我愿意：

<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
  });
}

无法读取Ionic 2中未定义的属性“ contentHeight”

编辑1

1 个答案: