Javascript 在水平列表上使用鼠标滚轮水平滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34180880/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Horizontal scroll with mouse wheel on horizontal list
提问by Sanction
I'm attempting a horizontal scroll with the mouse wheel, but doesn't seem to work.
我正在尝试使用鼠标滚轮进行水平滚动，但似乎不起作用。
Here is my Fiddle
这是我的小提琴
My main class .selectoris the one with scrollable overflow
我的主要课程.selector是可滚动的overflow
This is JS I am trying to initialise the scroll with
这是 JS 我试图用它来初始化滚动
$('.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/
这是我用于水平滚动的示例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
编辑：谢谢大家，我在 Fiddle 中忘记了 jQuery，抱歉，但是当我在 localhost 上进行测试时，我使用的是 jQuery 1.11.1，所以也许就是这种情况。干杯伙计们
采纳答案by Aelios
You just forget to add JQuery to your html
您只是忘记将 JQuery 添加到您的 html
jquery.js: http://code.jquery.com/jquery-2.1.4.min.js
jquery.js：http: //code.jquery.com/jquery-2.1.4.min.js
回答by Arg0n
Try this:
试试这个：
$('.selector').mousewheel(function(e, delta) {
$(this).scrollLeft(this.scrollLeft + (-delta * 40));
e.preventDefault();
});
Also, you did not include jQuery in your fiddle.
此外，您没有在小提琴中包含 jQuery。
EDIT
编辑
Actually, the only problem was that you did not include jQuery, your initial code works fine.
实际上，唯一的问题是您没有包含 jQuery，您的初始代码运行良好。
回答by Andrew
First thing: in yor jsfiddle you forget to include jquery.
第一件事：在您的 jsfiddle 中，您忘记包含 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.
第二件事：我改变$('.selector').mousewheel(function(e, delta) {了$('.selector').on("mousewheel", function(e, delta) {，只有这样我才能看到那个事件被触发了。
Also check your scrollLeftproperty update logic. Don't forget about direction (left, right), so in some case you should add value insead of subtract it
还要检查您的scrollLeft属性更新逻辑。不要忘记方向（左，右），因此在某些情况下，您应该添加值而不是减去它
