使用Javascript检测鼠标滚轮在x轴（左右）的移动

Question

我知道可以检测上下方向，例如：

    function handle(delta) {
    if (delta < 0) {
        alert('down');
} else {
    alert('up');
    }
}

function wheel(event){
    var delta = 0;
    if (!event) event = window.event;
    if (event.wheelDelta) {
        delta = event.wheelDelta/120; 
    } else if (event.detail) {
        delta = -event.detail/3;
    }
    if (delta)
        handle(delta);
        if (event.preventDefault)
                event.preventDefault();
        event.returnValue = false;
}

/* Initialization code. */
if (window.addEventListener)
    window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;​

但是有没有一种方法可以检测用户使用鼠标滚轮向左或向右滚动？

- bob_cobb

---

你想知道鼠标或鼠标滚轮向左还是向右移动了吗？并非所有的鼠标滚轮都可以左右移动。 - aglassman

@aglassman 很好的问题。只有鼠标滚轮。 - bob_cobb

@bob_cobb，你可能需要重新审视你的批准答案，转而支持最受欢迎且具有更丰富细节的答案。这样可以帮助未来的访问者找到正确的信息，并展示你对社区的关心！ - Annie

Answer 1

Internet Explorer: 在IE9和IE10中，您需要使用addEventListener来使用onwheel事件（而不是onmousewheel或DOMMouseScroll）以便从DOM检测到水平滚动轮。结合event.deltaMode值使用event.deltaX值来检测水平鼠标滚轮滚动（对于垂直滚轮，请使用event.deltaY值）。对于<= IE8，请使用onmousewheel事件和event.wheelDelta（仅支持y轴鼠标滚轮滚动的较旧IE版本）。

Blink / Webkit: 自Chrome 31 / Safari 7以来支持onwheel事件。否则，请使用onmousewheel事件和event.wheelDeltaX和event.wheelDeltaY属性。 Chrome / Safari的特殊技巧：在鼠标滚轮上使用SHIFT键可以左/右滚动（用于测试很有用）。

Firefox: Firefox 17及更高版本支持onwheel事件。 若要支持较旧版本的Firefox（返回到3.6），请使用现在已弃用的DOMMouseScroll和事件轴和事件详细信息属性以支持水平滚动。 （Firefox移动版：文档暗示在使用触摸设备进行平移时，将触发onwheel事件。我还没有尝试过。）Firefox还具有MozMousePixelScroll事件。 MDN文档还提供了处理不同浏览器的不同事件的建议代码。 Firefox还具有mousewheel.enable_pixel_scrolling配置，这可能会影响所有不同的滚轮事件。

使用来自QuirksMode的wheel事件测试器，亲自尝试onwheel事件。我在Win7上使用IE9和Windows 8上的IE10（发布预览版，IE版本为10.0.8400.0）看到了这个功能的工作。要设置新的标准onwheel事件：

• 选择addEventListener（捕获）单选按钮。
• 取消勾选滚动条。
• 取消勾选鼠标滚轮。
• 勾选轮子。
• 在右侧列底部勾选显示事件属性。
• 使用F12并确认文档处于documentMode IE9 Standards或IE10 Standards下。
• 在中间列上进行一些滚动操作，查看左侧列记录的轮子事件，并在右侧列底部显示轮子事件细节。
• 有时您可能需要取消勾选并重新勾选轮子事件复选框才能获取事件（不确定为什么：也许是QuirksMode页面或IE中的一个错误？）

根据W3C规范、Microsoft IE9 MouseWheel事件文档和MDN文档，onwheel事件中有以下内容：

• deltaX - 获取鼠标滚轮沿x轴（水平）旋转的距离。
• deltaY - 获取鼠标滚轮沿y轴（垂直）旋转的距离。
• deltaZ - 获取鼠标滚轮沿z轴旋转的距离。
• deltaMode - 获取指示delta值的计量单位的值：
• DOM_DELTA_PIXEL (0x00) 默认值，增量以像素为单位。
• DOM_DELTA_LINE (0x01) 增量以文本行为单位。
• DOM_DELTA_PAGE (0x02) 增量以文本页为单位。

编辑提示: 如果设置了 event.ctrlKey，请勿阻止默认事件，否则可能会阻止页面缩放。此外，显然在 Chrome 和 IE 中使用触摸板的 pinch-zoom 时，ctrlKey 的值为 true。

在 IE 中进行特性检测很困难:

• 在 IE10 中，IE8 文档模式下，'onwheel' in document 返回 true，但好像没有水平或垂直 onwheel 事件被触发。
• 在 IE9 中，'onwheel' in document 返回 false，但 onwheel 事件可以正常工作（我想在 IE9 中使用 onwheel 事件之前应该检查 document.documentMode === 9）。
• 在传统的 IE9 和 IE10 中，document.onwheel = 'somefunc(event)' 似乎不起作用，即使在 documentMode 9 或 10 中也是如此（即只能使用 addEventListener）。

要进行测试，请使用 Microsoft 陀螺鼠标、滚动触摸板（手势或区域）或 Apple 设备（魔术鼠标或强大的鼠标滚轮）。在 Windows 中播放各种鼠标或触摸板设置（如果使用 Safari 在 OSX 上测试水平滚动，则需要在 OSX 上的鼠标首选项中进行设置）。

所有浏览器中，onwheel 和 onmousewheel 的 delta 值符号相反。在 IE 中，onwheel 和 onmousewheel 的 delta 值不同，例如（在我的开发机器上使用带有非常标准的 Microsoft 鼠标的 IE9）:

• 当 onwheel 事件向下滚动一个缺口时，Win8 中的 event.deltaY 为 111 或 Win7 中的为 72。该值会随着缩放略微变化，但还涉及另一因素，我无法解决（似乎不是字体大小）。

• event.wheelDelta 在鼠标滚轮向下滚动一个刻度时的onmousewheel事件中为-120。

• 对于Windows XP，“我们必须添加对 WM_MOUSEHWHEEL 消息的支持才能使其工作 [，支持]在Vista中添加，因此如果您使用XP，则需要安装IntelliType Pro和/或 IntelliPoint” - 根据 这篇文章。

• 各种常用触摸板和鼠标驱动程序破坏了浏览器的鼠标滚轮支持，例如损坏的浏览器检测，或者使用WM_HSCROLL和WM_VSCROLL消息而不是WM_MOUSEWHEEL和WM_MOUSEHWHEEL消息。 因此，某些驱动程序将无法在浏览器中生成滚轮事件（无论您使用哪个浏览器或Windows版本）。在 Bugzilla上搜索WM_VSCROLL 显示可能会影响任何浏览器（不仅限于Firefox）的问题。

- robocat

---

这个答案是我到目前为止在这个主题上找到的最好的资源。感谢您出色的研究工作。+1 - kikito

Answer 2

• 在Firefox中，DOMMouseWheel 事件具有一个 axis 属性。

• 在Chrome中，mousewheel 事件具有 wheelDeltaX 和 wheelDeltaY 属性。

• 遗憾的是，在IE事件中我找不到任何相应的属性（在IE9上测试）。

- apsillers

---

谢谢。我会看看能否为IE找到一些东西。 - bob_cobb

Answer 3

我相信你可以从中找到“水平”或x轴的数据

event.originalEvent.wheelDeltaX

你应该调试代码，查看事件对象在运行时有哪些属性。这应该可以确认或否认该属性是否存在。从那里开始，只需要检测值是否不同即可。

- aglassman

---

请查看这个答案。https://dev59.com/aV3Va4cB1Zd3GeqPAnfj - aglassman

Answer 4

请查看被接受的答案以获取更多链接和信息。

滚动/鼠标滚轮事件

event.detail 指定鼠标滚轮移动的“刻度”数。

正值表示向下/向右，负值表示向上/向左。

event.axis 指定滚动手势的轴（水平或垂直）。此属性在 Firefox 3.5 中添加。

Chrome 实现与 IE 相同的行为 AFAIK。在 IE 和 Chrome 中：使用 e.wheelDeltaX 和 e.wheelDeltaY

- Knyri

Answer 5

IE支持它们全部: mousewheel | onmousewheel，它们是event handlers以及WheelEvent（提供DeltaX，DeltaY，DeltaZ），它是standard Event和MouseWheelEvent interface，也在IE9+中得到支持（具有WheelDelta和许多其他与x，y坐标相关的属性）。

在IE11上测试通过。

相关信息：今天当触摸事件标准最终得到规范化时，IE11已经支持其中的大部分内容：http://blogs.msdn.com/b/ie/archive/2015/02/24/pointer-events-w3c-recommendation-interoperable-touch-and-removing-the-dreaded-300ms-tap-delay.aspx。

另外：@bob_cobb，您可能需要重新审视您批准的答案，支持获得最多投票和丰富详细信息的那个答案。这样可以帮助未来的访问者找到正确的信息，并展示您对社区的关心！

- Annie