时间戳

首页 > 解决方案 > Ionic 中需要的 document.scrollTop 值

javascript - Ionic 中需要的 document.scrollTop 值

问题描述

我需要在我的 Ionic 2 页面中获取 scrollTop 位置，但它只是不起作用。

相同的代码在普通的 html 页面中工作，但它总是0在 IONIC 中返回。

请参阅下面的代码，该代码正在运行：

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

我已经在我的 Ionic 项目中安装了 jQuery，它正在工作，但特别是这个$(document).scrollTop();功能不起作用，每次它给我0.

我在上下文菜单上的应用程序中做了很多工作，如果现在我必须将其更改为其他内容，这对我来说将是一个巨大的痛苦。我怎样才能获得scrollTop价值？

标签： javascriptjqueryionic-frameworkionic2ionic3

解决方案

我建议使用更“Angular”的方式，不使用 jQuery，并且不需要太多更改。

在您的文档中定义一个 Viewchild（您要滚动到的元素）。

<div #topScroll></div>

然后在您的页面控制器中定义：

  export class Page {

  @ViewChild(Content) topScroll: Content;

      private scrollToTop() {
          this.topScroll.scrollToTop(500);
      }
  }

这将滚动到元素的顶部。

推荐阅读