Horizontal scroll event in Angular 8?

Question

Elaborating on this threat, I have managed to navigate the routes through a scroll event in my App! My issue, I need it to work only when one is scrolling horizontally and not vertically, is that a way of doing that in Angular 8?

Answer 1

You can use the host listener feature to identify the scroll event,

 @HostListener('scroll', ['$event']) private onScroll($event:Event):void {
    console.log($event.srcElement.scrollLeft, $event.srcElement.scrollTop);
 };

If there is change in scrollLeft, that denotes the horizontal scrolling event.

Answer 2

We can use (scroll)="myFunction()" to detect scroll in angular...

In component.html

<div class="container" (scroll)="onScroll($event)">
  <div class="content">
    // Some content 
  </div>
</div>  

In component.ts

onScroll(event: Event) {
  console.log(event);
  // write your logic here
}