ttmt
ttmt

Reputation: 4984

Angular 4 detect horizontally scrolling on an element

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;
}

Upvotes: 5

Views: 8945

Answers (1)

Martin Parenteau
Martin Parenteau

Reputation: 73761

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.

Upvotes: 12

Related Questions