Javascript 如何在鼠标滚轮滚动上进行水平滚动？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2346958/
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
How to do a horizontal scroll on mouse wheel scroll?
提问by Rakesh Juyal
Just now, accidentally, i stumble upon http://www.benekdesign.com/. Here on mouse wheel scroll it performs horizontal scroll. Truly speaking i didn't like this feature. It was a bit irritating. But still,Please tell me how to achieve the same.
刚才，偶然地，我偶然发现了http://www.benekdesign.com/。在鼠标滚轮滚动时，它执行水平滚动。老实说，我不喜欢这个功能。这有点令人恼火。但是，请告诉我如何实现相同的目标。
Edited
已编辑
Okay, firebug says he is using
好的，萤火虫说他正在使用
/* Horizontal Tiny Scrolling - a smooth scrolling script for horizontal websites 2(the brother of the vertical "Tiny Scrolling") 3by Marco Rosella - http://www.centralscrutinizer.it/en/design/js-php/horizontal-tiny-scrolling4 v0.6 - February 14, 2007
/* Horizontal Tiny Scrolling - 水平网站的平滑滚动脚本 2（垂直“Tiny Scrolling”的兄弟）3by Marco Rosella - http://www.centralscrutinizer.it/en/design/js-php/horizontal-tiny -scrolling4 v0.6- 2007 年 2 月 14 日
回答by Andy E
It looks like he's just mapping the mousewheel eventto scrolling the area. In IE, this is really easy by just using the doScroll()method - this will scroll the horizontal bar by the amount the vertical bar would normally scroll by. Other browsers don't support the doScroll()method, so you have to live with scrolling by an arbitrary amount instead:
看起来他只是将鼠标滚轮事件映射到滚动区域。在 IE 中，这真的很容易通过使用该doScroll()方法 - 这将按垂直条通常滚动的量滚动水平条。其他浏览器不支持该doScroll()方法，因此您必须忍受任意数量的滚动：
var mouseWheelEvt = function (event) {
if (document.body.doScroll)
document.body.doScroll(event.wheelDelta>0?"left":"right");
else if ((event.wheelDelta || event.detail) > 0)
document.body.scrollLeft -= 10;
else
document.body.scrollLeft += 10;
return false;
}
document.body.addEventListener("mousewheel", mouseWheelEvt);
回答by madc
As the solutions above does not work for me, here another one i just found: http://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/
由于上述解决方案对我不起作用，我刚刚找到了另一个解决方案：http: //css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/
Example: http://digwp.com/archives/horz/
回答by Heddie Franco
Another form:
另一种形式：
document.addEventListener('wheel', (e) => {
document.getElementById('scroll_container').scrollLeft += e.deltaY;
})
