Horizontal scroll with mouse wheel on horizontal list

Question

I'm attempting a horizontal scroll with the mouse wheel, but doesn't seem to work.

Here is my Fiddle

My main class .selector is the one with scrollable overflow

This is JS I am trying to initialise the scroll with

 $('.selector').mousewheel(function(e, delta) {
    this.scrollLeft -= (delta * 40);
    e.preventDefault();
});

This is the example I am using for horizontal scroll https://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/

Thanks in advance for any help!

EDIT: Thanks all, I forgot jQuery in the Fiddle yeah sorry, but when I was testing on localhost I was using jQuery 1.11.1 so maybe that was the case. Cheers guys

Solution 1

You just forget to add JQuery to your html

http://jsfiddle.net/902tjbzz/

jquery.js : http://code.jquery.com/jquery-2.1.4.min.js

Solution 2

Try this:

$('.selector').mousewheel(function(e, delta) {
    $(this).scrollLeft(this.scrollLeft + (-delta * 40));
    e.preventDefault();
});

Also, you did not include jQuery in your fiddle.

EDIT

Actually, the only problem was that you did not include jQuery, your initial code works fine.

Solution 3

First thing: in yor jsfiddle you forget to include jquery.

The second thing: I changed $('.selector').mousewheel(function(e, delta) { to $('.selector').on("mousewheel", function(e, delta) { and only then I could see that event is triggered.

Also check your scrollLeft property update logic. Don't forget about direction (left, right), so in some case you should add value insead of subtract it

Comments

[Sanction]

Sorry mate, not sure who downvoted you. Upvoted you back up.