How to set the sensitivity of Angular 8 wheel event?

Question

Going by this thread, I was able to set my app up so that it navigates when one scrolls. I have just one issue, information for which have not been able to find anywhere! How do I set the "sensitivity" of the scroll event? My issue is that often even with the slightest scroll, it navigates multiple routes rather than just giving me the next one. As you can see in the GIFF attached, this is with very light movement of my trackpad and it goes too fast from About to Tour to Gallery to all other navigation points! Is there a way to regulate the speed, delay, sensitivity anything?

The event listener is placed on all the components like below! This is from my tours.component.ts

  @HostListener('wheel', ['$event'])
  onWheelScroll(evento: WheelEvent) {
    // Scroll down go to gallery
    if (evento.deltaY > 0) {
      this.router.navigate(['gallery'])
      // Scroll up go to about
    } else {
      this.router.navigate(['about'])
    }

Madelina

You could create an ignore prop which would be true during scroll and simply ignore scrolling event when prop's true – Rescission

@Rescission thank you for your comment! I don't quite understand it though, do you mind elaborating your idea? Thank you! – Madelina

Maybe there is a way of setting it so that it will not navigate more than one navigation point per scroll event? Does that make sense? I wouldn't know how to go about that though! – Madelina

Answer 1

Should try throttling or debouncing the scroll event. There are n number of ways to implement debouncer for scroll event.

i) Using vanilla javascript method, https://davidwalsh.name/javascript-debounce-function

ii) Using RxJs operators, https://www.codementor.io/abolaji_dev/throttling-and-debounce-with-rxjs-observable-cjcgdii1d

iii) Using Angular way, Debounce @HostListener event

This would ideally delay the scrolling event occurrences there by delay in navigation.

Yost

Thank you for your commment! I have been reading into it and it seems like this might be the best solution. I am still a bit of a beginner however, would it be possible to guide me in terms of my case? – Madelina

do you use rxjs in your app? or its just angular app? – Yost

As of now it is just an angular app – Madelina

you can use the option 3, answer by yurzui, create a separate debounce method decorator and use it on the host listener where you have scrolling event captured. That would debounce the event to the specified milliseconds which is 300 in that example provided. You can modify the milliseconds as per your need. plnkr.co/edit/3J0dcDaLTJBxkzo8Akyg?p=preview – Yost

Answer 2

Since you are navigating on scroll that means that in app.component.ts or any other higher level component you have your listener enabled.

You could place there something like this

...
// we'll use this to ignore scrolling event
navigating = false;

constructor(
  ...
  private readonly router: Router
) {
  this.router.events.subscribe(e => {
    if (e instanceof NavigationStart) {
      this.navigating = true;
    } else if (e instanceof NavigationEnd) {
      this.navigating = false;
    }
  });
}

And then in your handler if it's a simple callback function

if (this.navigating) {
  return;
}

Or filter if you are using RxJs' fromEvent

source$.pipe(filter(e => !this.navigating))

Here is an example

Rescission

I still don't follow. I have edited my question and also added a piece of code. Essentially I have this listener in all components where its also defined where to navigate next depending on the up or down scroll. – Madelina

I think you should move this logic to the router-outlet host and handle navigation logic from there. You could create a simple array const with all routes and go over it. – Rescission

Mhm I see, but it doesn't quite work. The same issue I have of too many scroll events being fired is happening in your example too. With slightest scroll it navigates back and forth between "Hello" and "world works!" – Madelina

@kontenurban because navigation processes faster than animation. You may need to hook into animations and make navigating false when animation is finished – Rescission