angular 4 scrolling event-CodePudding

I'm quite lost in scroll event handling.

I want to disable scrolling; when the user hits the scroll wheel x times I want the page to scroll down (with some animation) down to a certain element. I was able to add the HostListener but I didn't get any further.

@HostListener('window:scroll', ['$event'])
    public onScrollEvent(event) {
}

but the first issue is that event.preventDefault() or event.stopPropagation() are not working. I tried something like

event.target.scrollingElement.scrollTop = 0;

and when my counter hits a certain number call

event.target.scrollingElement.scrollTop = 1080;

But this was a mess! :).

I also didn't find any scrolling manual on angular official site.

CodePudding user response：

You can achieve this using the css styles itself.

body{
   overflow: hidden;
}

CodePudding user response：

The name of the event on the @HostListener decoration HAS to match with the name of the argument passed to the onScrollEvent method. It has to be literally the same, try with:

@HostListener('window:scroll', ['$event'])
public onScrollEvent($event){/*handler operations here...*/}

CodePudding user response：

Try this:

@HostListener('window:scroll', ['$event'])
onScroll(event) {
  window.scrollTo(window.scrollX, 0);
}

and when your counter hits a certain number call:

window.scrollTo(window.scrollX, 1000);