document.scrollTop, прибывающий 0 в Ionic - PullRequest
Новая
       11

document.scrollTop, прибывающий 0 в Ionic

0 голосов
/ 18 сентября 2018

Когда я прокручиваю свою страницу и нажимаю, я получаю y позицию сверху, поэтому при прокрутке она продолжает увеличиваться в HTML и JS.

Но когда я пытаюсьчтобы добиться того же в Ionic, он всегда возвращает 0 .

Для большей ясности посмотрите это 1-минутное видео .

Ниже приведен мой рабочий jsfiddleкод, ссылка на мой 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 ссылка .

Ответы [ 2 ]

0 голосов
/ 18 сентября 2018

Прежде всего, вы никогда не должны использовать jQuery с Angular, они делают одно и то же, поэтому бесполезно иметь и то и другое, все, что jQuery делает Angular, может делать тоже самое. Так что это не рекомендуется. Поэтому, если это крайне не нужно, не используйте.

Вы не можете наблюдать никаких изменений в свойстве scrollTop, так как оно не перемещает body, но перемещает тег содержимого внутри него. Существует content компонент , который можно использовать для получения этого свойства. Так что сделайте это:

Ваша страница .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 на прокручиваемое значение, но если вам нужно использовать это значение где-нибудь одним щелчком, не просто добавьте щелчок к вашему ion-content или любой щелчок к любому элемент внутри него не будет работать, вместо этого используйте кнопку или сделайте то, что вам нужно сделать внутри метода getScrollTop.

Надеюсь, это поможет.

0 голосов
/ 18 сентября 2018

При использовании Ionic вы не прокручиваете весь документ.Вы должны проверить позиции прокрутки элемента с классом 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
}
...