Question

当试图向下滚动应用程序时，我试图隐藏离子应用程序中的元素，而当向上滚动应用程序时，我试图显示该元素。

我正在通过组件执行此操作，因此我可以将标签放置在我想要此功能的任何元素上。

我认为当滚动事件触发时，我将能够获得window.PageYOffset的值，但是window.PageYOffset的值始终为0。我认为该值将与文档的像素数有关沿Y轴滚动，但我显然误会了一些东西。

在我拥有的hide-on-scroll域名中

private eventOptions: boolean|{capture?: boolean, passive?: boolean};
ngAfterViewInit(){

    //removed where I set eventOptions

  this.ngZone.runOutsideAngular(() => {
      window.addEventListener('scroll', this.scroll, <any>this.eventOptions);
  });

  }
  scroll = (event: any): void => {
    var a = window.pageYOffset; //value is always 0
  };

每滚动一次都会触发

我的HTML

<ion-header>
  <hide-on-scroll>
    <h1>Test</h1>
  </hide-on-scroll>
</ion-header>

<ion-content class="page-background">
  <div *ngIf="margins">
    <div *ngFor="let val of margins.ByZone">
      <div style="height:500px; margin-top:20px">
        <h1>dummy content</h1>
      </div>
    </div>
  </div>
</ion-content>

两个问题

为什么window.pageYOffset始终为0？

在滚动事件中，如何获取一个值来检查页面是向下滚动还是向上滚动？

更新

ionic正在自动生成<html>和<body>标签，并在其中设置height:100%值。乔尔·约瑟夫（Joel Joseph）在评论中提到，在尝试获取window.PageYOffset时这是一个问题。有解决方法吗？

Answer 1

问题是使用window.pageYOffset，滚动事件使用ion-content。您将需要使用离子提供的滚动事件，这是ion-content

的一部分

<ion-content class="page-background" [scrollEvents]="true" (ionScrollStart)="onIonScrollEnd($event)">
  <div *ngIf="margins">
    <div *ngFor="let val of margins.ByZone">
      <div style="height:500px; margin-top:20px">
        <h1>dummy content</h1>
      </div>
    </div>
  </div>
</ion-content>


onIonScrollEnd(event) {
    console.log(event)
}

确保也使用scrollEvents打开滚动事件

我希望我知道使用ion-content时获得YOffset，我也试图为此寻找一个好的解决方案

为什么window.pageYOffset始终为0？以及如何获取一个值来检查页面是否向下滚动或向上滚动？

1 个答案: