CODEWITHSUNDEEP
javascriptjqueryhtmlcssscroll
Sanction
Sanction

Reputation: 179

Horizontal scroll with mouse wheel on horizontal list

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

Upvotes: 8

Views: 27803

Answers (3)

Andrew
Andrew

Reputation: 1534

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

Upvotes: 1

Aelios
Aelios

Reputation: 12137

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

Upvotes: 7

Arg0n
Arg0n

Reputation: 8423

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.

Upvotes: 6

Related Questions