Horizontal scroll with mouse wheel in horizontal list

Question

I am trying to scroll horizontally with the mouse wheel, but it does not seem to work.

Here is my fiddle

My main .selector class is scrollable overflow

This is JS. I am trying to initialize scrolling with

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

This is an example that I use for horizontal scrolling https://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/

Thanks in advance for your help!

EDIT: Thank you, I forgot jQuery in Fiddle, yes, sorry, but when I tested on localhost, I used jQuery 1.11.1, so maybe that was the case. Greetings guys

Answer 1

You just forgot to add jQuery to your html

http://jsfiddle.net/902tjbzz/

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

Answer 2

Try this :

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

In addition, you did not include jQuery in your script.

EDIT

Actually, the only problem was that you did not enable jQuery, your source code is working fine.

Answer 3

First: in yor jsfiddle, you forgot to enable jquery.

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

Also check your logic for updating scrollLeft properties. Don't forget about the direction (left, right), so in some cases you have to add insead value to subtract it