Replacement for ‘addScrollListener’?


#1

Recently my code to add a scroll listener to ion content had been deprecated (i believe? - i was using this.content.addScrollListener((event) => {})) and I am now using the following:

@ViewChild(Content) 
content: Content;

ngAfterViewInit() {
    this.content._scroll.scroll.asObservable().subscribe((event) => {
      console.log(event.scrollTop);
    });
}

However it is causing the page to lag/freeze. Is this the correct code for me to use to monitor the scroll on a page?


#2

See there, maybe gonna work


#3

Thanks for response. The code does work to catch the scroll event but it seems to have broken the actual manual scrolling on my page, I get the warning:

Handling of ‘touchstart’ input event was delayed for 1482145573421 ms due to main thread being busy. Consider marking event handler as ‘passive’ to make the page more responsive

.Don’t think I will be wanting my users to wait 46 years to be able to scroll down to my ‘Register’ button! :joy:


#4

Interresting … honestly I’ve got no ideas but I would love to hear something from the ionic team about that.

Maybe it deserve the opening of an issue in the ionic github tracker?


#5

I’ll post up an issue later on and link here


#6

We’ll take a look at whats going on. Thanks for pointing this out


#7

Where are you seeing this? I just tested the same code and was not able to get chrome to throw that warning.

By default, these events should be passive anyways.


#8

Hey Mike. Thanks for your reply. I’m afraid I just assumed the scroll listener was the issue after the RC4 update as its the only thing in the component that changed, but after removing it the problem persists. I will try to find the cause today

EDIT* - Not 100% sure what was causing the error.


#9

I have noticed that RC4 ionScroll is showing lag/freeze as #alsco77 mentioned.
I made an affix effect on <ion-navbar> with RC3, but with RC4 it shows lag/freeze .

Blow is the actual code that worked in RC3
Same result but lagging with RC4

RC3

  ngAfterViewInit() {
    this.content.addScrollListener((event) => {
      if(event.target.scrollTop > 0) {
        // Scroll down
        this.showAd = false;
        this.showFab = true;
        this.colorToolbar = 'primary';
      }
      if(event.target.scrollTop <= this.showAdFlagHeight && !this.showAd) {
        // Scroll up
        this.showAd = true;
      }
      if((event.target.scrollTop + event.target.offsetHeight) > (event.target.scrollHeight * 0.98)){
        // Scroll is bottom 0
        this.showAd = true;
      }
      if(event.target.scrollTop == 0){
        // Top: 0
        this.colorToolbar = '';
        this.showFab = false;
      }
      this.showAdFlagHeight = event.target.scrollTop;
    });
  }

RC4

ngAfterViewInit() {
    this.content.ionScroll.subscribe((event: any) => {
      console.log(event);

      if(event.scrollTop > 0) {
        this.showFab = true;
        this.colorToolbar = 'primary';
      }


      if(event.scrollTop == 0){
        this.showFab = false;
        this.colorToolbar = '';
      }

    });
  }

#10

one more thing,

with RC4,

the values from $event takes action after scrolling is done.
if I console the $event, i can see the values are changing but does not render as value changes. View gets rendered after scrolling is done.


#11

Thanks for providing a bit more clarity on this. I presumed it was an error with my code and gave up but yes i’m having the exact same problem. Had to take the scroll listener out of the component.


#12

Don’t suppose you have found any solution to this?