Angular 4 detect horizontally scrolling on an element

Question

How can I detect horizontally scrolling on an element

I have a div in a containing div that scrolls left to right.

I want to detect the when the div is scrolling.

I can use this to detect the window scrolling, but how do I detect one element scrolling

@HostListener("window:scroll", []) onWindowScroll() {
    console.log('scrolling');
    const verticalOffset = window.pageYOffset
        || document.documentElement.scrollTop
        || document.body.scrollTop || 0;
}

Answer 1

You can handle the scroll event of the container div:

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

onScroll(event: Event) {
  console.log(event);
  ...
}

See this stackblitz for a demo.