CODEWITHSUNDEEP
jqueryangularionic-frameworkionic2ionic3
user2828442
user2828442

Reputation: 2515

document.scrollTop coming 0 in Ionic

When I scroll my page and click, I get its y position from the top, so as I scroll it keeps on increasing in HTML and JS.

But when I am trying to achieve the same in Ionic it is always returning 0.

For more clarity see this 1 minute video.

Below is my working jsfiddle code, link to my jsfiddle , scroll and click, you will see alert with y position value.

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

How can I achieve the same in Ionic, this is not working. Here is my Stackblitz link.

Upvotes: 1

Views: 1744

Answers (2)

Gabriel Barreto
Gabriel Barreto

Reputation: 6421

First of all you should never use jQuery with Angular, they do the same thing so there's no use to have both, everything jQuery does Angular can do too. So it's not recommended. So unless it's extremely needed, don't use.

You can't observe any changes to your scrollTop property since it's not moving the body, but it's moving the content tag inside of it. There's an content component whose ou can use to get this property. So do this:

Your page .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;
  }
}

Your HTML:

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

With this you'll always change the value of scrollPost with the value scrolled, but if you need to use this value anywhere with a click don't just add a click to your ion-content or any click to any element inside of it will not work, instead use a button or do what you need to do inside getScrollTop method.

Hope this helps.

Upvotes: 1

Peter Varadi
Peter Varadi

Reputation: 96

While using Ionic you don't scroll the whole document. You should check the element's scroll positions with class scroll-content. 

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

There are some cases when you have more than one scroll-content, so you could iterate on them like:

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

Upvotes: 0

Related Questions