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

回答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

回答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.

回答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

来源：https://stackoverflow.com/questions/34180880/horizontal-scroll-with-mouse-wheel-on-horizontal-list