Get horizontal scroll event in js

Question

What I want to do, is to catch the event when the user is scrolling div horizontally. For vertical scroll I am using event 'mousewheel' and it's working properly. ( horizontal scroll is performed by a two finger drag on the touchpad - I am testing on Mac OS).

Answer 1

You can handle horizontal scrolling by :

$("#someContainer").on("scroll", function (e) {
            horizontal = e.currentTarget.scrollLeft;
            vertical = e.currentTarget.scrollTop;
            });

In this case this bind all kind of scroll events on this element so you can also handle

Vertical by e.currentTarget.scrollTop

and

Horizontal by e.currentTarget.scrollLeft

Answer 2

I don't have the proper setup to test this, but $.scroll() should do the trick. It's probably preferable to binding the mousewheel event as well. People use all means of scrolling ;)

Answer 3

e.currentTarget.scrollX instead of e.currentTarget.scrollLeft and e.currentTarget.scrollY instead of e.currentTarget.scrollTop