19

我知道可以检测到上下，例如

    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;​

但是有没有办法检测用户的鼠标是随着鼠标滚轮向左还是向右？

4

5 回答 5

49

Internet Explorer：在 IE9 和 IE10 中，您必须使用onwheel事件（不是 onmousewheel，也不是 DOMMouseScroll）addEventListener来检测来自 DOM 的水平滚轮滚动。使用该event.deltaX值和该event.deltaMode值来检测水平鼠标滚轮（对于垂直滚轮，请使用该event.deltaY值）。对于 <= IE8，使用onmousewheel事件和event.wheelDelta（旧 IE 版本仅支持 yaxis 鼠标滚轮）。

Blink/Webkit：自 Chrome 31/Safari 7 起支持 onwheel 事件。否则使用onmousewheel事件和event.wheelDeltaXandevent.wheelDeltaY属性。Chrome/Safari 唯一的技巧：在鼠标滚轮向左/向右滚动时使用 SHIFT 键（对测试很有用）。

Firefox：Firefox 17 及更高版本支持 onwheel 事件。要支持旧版本的 Firefox（回到 3.6），请使用现已弃用DOMMouseScroll的 event.axis 和 event.detail 属性来支持水平滚动。（Firefox 移动版：文档暗示使用触摸设备进行平移时会触发 onwheel 事件。我没有尝试过。）。Firefox 也有一个MozMousePixelScroll事件。MDN 文档还提供了建议的代码来处理跨浏览器的不同事件。Firefox 还有一个 mousewheel.enable_pixel_scrolling 配置，它可能会影响所有不同的滚轮事件。

使用 QuirksMode 的轮子事件测试器自己尝试 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- 获取一个值，该值指示增量值的测量单位：
    • DOM_DELTA_PIXEL(0x00) 默认值。增量以像素为单位。
    • DOM_DELTA_LINE(0x01) 增量以文本行为单位。
    • DOM_DELTA_PAGE(0x02) 增量以文本页为单位。

编辑：确保你不阻止默认（）如果event.ctrlKey设置了事件，否则你可能会阻止页面缩放。如果您在 Chrome 和 IE 的触摸板上使用捏合缩放，显然 ctrlKey 设置为 true。

IE中的特征检测很困难：

  • 在带有 IE8 documentMode 的 IE10 中，'onwheel' in document返回 true，但似乎没有为水平或垂直 onwheel 事件触发任何事件。
  • 在 IE9'onwheel' in document中返回 false 但 onwheel 事件有效（我想document.documentMode === 9在 IE9 中使用 onwheel 事件之前应该检查一下）。
  • 在 IE9 和 IE10document.onwheel = 'somefunc(event)'中，即使在 documentMode 9 或 10 中，传统的似乎也不起作用（即看起来您只能使用 addEventListener）。

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

对于所有浏览器，增量值的符号与 onwheel 和 onmousewheel 的符号相反。在 IE 中，onwheel 和 onmousewheel 的 delta 值是不同的，例如（使用带有 IE9 的开发机器和非常标准的 Microsoft 鼠标）：

  • event.deltaY在 Win8 上为 111，在 Win7 上为 72，onwheel事件向下滚动一个档次。该值随缩放而略有变化，但还有一些其他因素我无法解决（似乎不是字体大小）。

  • event.wheelDeltaonmousewheel事件向下滚动一档时为 -120 。

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

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

  • Firefox 中的DOMMouseWheel事件有一个axis属性。

  • Chrome 中的mousewheel事件有wheelDeltaX和wheelDeltaY。

  • 可悲的是，我找不到 IE 事件的任何等效属性（在 IE9 上测试）。

于 2012-05-30T18:38:44.697 回答
1

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

event.originalEvent.wheelDeltaX

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

于 2012-05-30T18:34:14.127 回答
1

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

冒泡滚动/鼠标滚轮事件

event.detail指定鼠标滚轮移动的“滴答声”数。

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

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

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

于 2012-05-30T18:38:34.207 回答
0

IE 支持所有这些：鼠标滚轮 | 作为事件处理程序的onmousewheel以及作为标准事件和接口的WheelEvent（提供DeltaX、DeltaY、DeltaZ），在 IE9+中也受支持（具有和数量的其他，坐标相关属性）。MouseWheelEventWheelDeltaxy

在 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，您可能需要重新查看您已批准的答案，以支持投票最多、细节最丰富的答案之一。这可以帮助未来的访客找到正确的信息，并表明您甚至关心社区！

于 2015-02-25T04:02:01.860 回答