Replacement for ‘addScrollListener’?

Ionic Framework ionic-v3
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

1 Like
6

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

2 Likes
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 = '';
      }

    });
  }
1 Like
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.

1 Like
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?

13

On your page, with ion-content,you can use this wat:

<ion-content [scrollEvents]=“true” (ionScroll)=“handleScroll($event)”>

public handleScroll(event): void {

if( event.detail.scrollTop) > 80 {
    ... action/function
}
if( event.detail.scrollTop) < 80 {
    ... action/function
}

}
working in ionic, 5 and 6.