如何在鼠标滚轮滚动时进行水平滚动？

Question

刚才无意中，我偶然发现了 http://www.benekdesign.com/。当鼠标滚轮滚动时，它可以水平滚动。实话实说，我不喜欢这个功能。有点烦人。但是，请告诉我如何实现相同的效果。

编辑

好吧，Firebug说他在使用：

/* Horizontal Tiny Scrolling - 用于水平网站的平滑滚动脚本（纵向的“Tiny Scrolling”的姐妹篇） 由Marco Rosella编写- http://www.centralscrutinizer.it/en/design/js-php/horizontal-tiny-scrolling 版本0.6-2007年2月14日

- Rakesh Juyal

---

它在Opera 10.10中不起作用。 - frbry

Answer 1

看起来他只是将mousewheel事件映射到区域滚动。在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);

- Andy E

---

关于您的编辑，这正是为什么应该使用库的原因。 - Cobby

@Cobby：祝你好运，找到实现跨浏览器 onmousewheel 的库。有几个jQuery插件，但与此处的代码相比它们相当庞大。 :-) - Andy E

jquery.mousewheel 实际上非常不错，而且并不是“大而全”的。你的解决方案没有考虑到滚动值。使用触摸板时，即使轻微移动，鼠标滚轮事件也会触发大约10到20次，这意味着滚动条将滚动100像素，而不是用户期望的10像素。 - Cobby

@Cobby：jquery.mousewheel并不能像我的示例代码那样工作，所以你在进行苹果和橙子的比较。我认为这对于这个任务来说有些过度了。此外，我认为你对delta的工作原理有些困惑，它表示每次事件触发时鼠标/触摸板滚动的距离。因此，如果有什么问题，这段代码会使非常大的移动滚动得更慢一些。我从一些旧的自定义滚动条代码中提取了这段代码，可以证实它运行得相当不错，虽然我想我可以稍微改进一下它。在匆忙地投票之前，你真的应该做好调查研究。 - Andy E

抱歉，我确实尝试了您的方法来增加一个固定的数量，但是我的<div>在触摸板上轻微地用两个手指滑动就会尝试滚动大约2000像素...您需要使用delta来使滚动更加流畅。我非常清楚delta的工作原理。 - Cobby

Answer 2

由于上面的解决方案对我不起作用，这里有另一个我刚刚找到的： http://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/

示例： http://digwp.com/archives/horz/

- madc

---

非常感谢您抽出时间发表这条评论@madc。真的帮了我很多。编辑：对我来说，插件链接已经失效，而在css-tricks上的演示在Firefox 19.0.1中也无法正常工作，但是您提供的示例链接可以正常工作，所以我从那里复制了代码。 - Calvin

确实好多了！ - tatsu

Answer 3

另一种形式：

document.addEventListener('wheel', (e) => {
    document.getElementById('scroll_container').scrollLeft += e.deltaY;
})

- HFranco