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

Build an Angular directive with @HostListener and attach it to the element you wan't to detect scrolling on. — Roberto Zvjerković
– Roberto Zvjerković, Commented Apr 30, 2018 at 14:08

Martin Parenteau · Accepted Answer · 2018-04-30 14:27:55Z

12

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.

answered Apr 30, 2018 at 14:27

Martin Parenteau

74k13 gold badges137 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

x-magix Over a year ago

this is not really realiable solution.. In my huge list on IE is a big problem while continues scroll UP, DOWN and LEFT, RIGHT. Looking for solution to detect only horizontal scroll

Collectives™ on Stack Overflow

Angular 4 detect horizontally scrolling on an element

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related