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 /

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

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

• javascript
• jquery
• html
• css
• scroll

• 1 In your fiddle you didn't include the jQuery link. I fixed this in: jsfiddle.net/a3j1x47a/3 – Mosh Feu Commented Dec 9, 2015 at 14:30

3 Answers 3

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

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.

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