Why is window.pageYOffset always 0? and how can I get a value to check if the page has being scrolled down or up?

Question

I'm trying to hide an element on my ionic app when the app is scrolled down and show when the app is scrolled up.

I am doing this through a component so I can just put tags around whatever elements I want this functionality on.

I thought I would be able to get the value of window.PageYOffset when a scroll event fires but the window.PageYOffset value is always 0. I thought this value would relate to the number of pixels the document is scrolled along on the Y axis, but I obviously misunderstand something.

in my hide-on-scroll componenet I have

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
  };

this fires on every scroll movement

my 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>

Two questions

Why is window.pageYOffset always 0?

In my scroll event how can I get a value to check if the page has being scrolled down or up?

Update

ionic is auto generating <html> and <body> tags and is setting a height:100% value in them. Joel Joseph mentioned in the comments that this is a problem when trying to get window.PageYOffset . Is there a workaround for this?

this may help you : http://joeljoseph.net/angular-sticky-header-on-scroll/ — Joel Joseph, Jun 28 '19 at 10:20
Hi @JoelJoseph thanks for the link, its very clear and informative but it does not help me understand why `window.pageYOffset;` is always 0 in my attempt — Kevin, Jun 28 '19 at 10:32
check if `overflow-x: hidden` inside the body or something related to setting `height:100%` there was this weird problem when i have worked on this article — Joel Joseph, Jun 28 '19 at 10:39
I did not not set `overflow-x` but I tried setting it and `overflow-y` to every combination and it made no difference — Kevin, Jun 28 '19 at 10:47
from what i know you should not be setting `overflow-x: hidden` inside the body or should not set `height:100%` . This was what that solved my issue . Did you inspect document elements in chrome console to see if it has been set , if yes you should remove it — Joel Joseph, Jun 28 '19 at 10:54
check this thread , it has similar discussion : https://stackoverflow.com/questions/12788487/document-scrolltop-always-returns-0 — Joel Joseph, Jun 28 '19 at 10:58
ionic is auto setting `height:100%` on body and html, is there a way around this? (thank you for all the time you have taken) — Kevin, Jun 28 '19 at 11:30
pageYOffset is always 0 as technically in Ionic you are not scrolling the document. You are scrolling overflow inside of ion-content. — Sergey Rudenko, Sep 01 '20 at 15:48

score 1 · Answer 1 · answered Aug 31 '20 at 21:37

the problem is using window.pageYOffset and the scroll event with ion-content. You will need to use the scrolling events ionic provides thats part of 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)
}

be sure to turn on scrolling events with scrollEvents too

as far as getting the YOffset while using ion-content I wish I knew, im trying to hunt down a good solution for that as well

Why is window.pageYOffset always 0? and how can I get a value to check if the page has being scrolled down or up?

1 Answers1