How to intercept scroll event in Angular 6?

Question

How to prevent scroll event?

I was trying to add event.preventDefault() into the HostListener but it's not working. event.stopPropagation() and event.stopImmediatePropagation() are not working too.

I need to implement some logic instead of scrolling.

@HostListener('window:scroll', ['$event'])
onScroll(event) {
  event.preventDefault();
  console.log('Hello World');
}

Please edit the question to make it clear that you want to intercept the scrolling with the mouse wheel (not using the scroll bar). — ConnorsFan, Apr 09 '19 at 18:02
@ConnorsFan Actually I want to intercept scroll event. It doesn't matter wheel or scroll bar. If you know how to prevent both triggers let me know please. — Dmitry Grinko, Apr 09 '19 at 18:05
You can use the trick given in [this answer](https://stackoverflow.com/a/4770059/1009922): reset the scroll position in the event handler. See [this stackblitz](https://stackblitz.com/edit/angular-bp8lq9?file=src%2Fapp%2Fapp.component.ts) for a demo. — ConnorsFan, Apr 09 '19 at 18:22
And here is [another stackblitz](https://stackblitz.com/edit/angular-plyafa?file=src%2Fapp%2Fapp.component.ts) showing how to allow/disallow scrolling. — ConnorsFan, Apr 09 '19 at 18:35

score 2 · Accepted Answer · answered Apr 09 '19 at 17:58

2

Try using 'wheel' instead of 'window:scroll'

answered Apr 09 '19 at 17:58

RadekF

476
5
10

How to intercept scroll event in Angular 6?

1 Answers1