How to set the sensitivity of Angular 8 wheel event?

问题

Going by this threat, 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'])
    }

回答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.

回答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

来源：https://stackoverflow.com/questions/59074727/how-to-set-the-sensitivity-of-angular-8-wheel-event