document.scrollTop 在 Ionic 中出现 0

Question

当我滚动我的页面并点击时，我从顶部得到它的 y 位置，所以当我滚动时它在 HTML 和 JS 中不断增加。

但是当我试图在 Ionic 中实现相同的目标时，它总是返回 0。

为了更清楚，请参阅此 1 minute video。

下面是我的工作 jsfiddle 代码，link 到我的 jsfiddle，滚动并单击，您将看到带有 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>
<div class="conta"></div>
  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>

如何在 Ionic 中实现相同的效果，这是行不通的。这是我的 Stackblitz link.

Answer 1

使用 Ionic 时，您不会滚动整个文档。您应该使用 class scroll-content 检查元素的滚动位置。

console.log(document.querySelector('.scroll-content').scrollTop);

有些情况下您有多个 scroll-content，因此您可以像这样迭代它们：

const scrollContents = document.querySelectorAll('.scroll-content');
for (let i = 0; i < scrollContents.length; ++i) {
    console.log(scrollContents.length[i].scrollTop);
    // do something
}

Answer 2

首先，你不应该将 jQuery 与 Angular 一起使用，它们做同样的事情，所以两者都没有用，jQuery 所做的一切 Angular 都可以也做。所以不推荐。所以除非非常需要，否则不要使用。

您无法观察到 scrollTop 属性的任何变化，因为它没有移动 body，而是移动其中的内容标签。有一个 content component，你可以用它来得到这个属性。所以这样做：

你的页面.ts

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

@Component({...})
export class MyPage{
  @ViewChild(Content) content: Content;
  public scrollPost: number = 0;

  getScrollTop() {
    this.scrollPost = this.content.scrollTop;
  }
}

你的HTML：

<ion-content (ionScroll)="getScrollTop()">
  <!-- your page content -->
</ion-content>

有了这个，您将始终通过滚动值更改 scrollPost 的值，但是如果您需要通过单击在任何地方使用此值，请不要只向 [=16= 添加单击] 或对其中任何元素的任何点击都不起作用，而是使用按钮或在 getScrollTop 方法中执行您需要执行的操作。

希望这对您有所帮助。

document.scrollTop 在 Ionic 中出现 0

document.scrollTop coming 0 in Ionic

jquery

ionic-framework

ionic2

ionic3

angular