javascript 使用Javascript检测x轴（左右）上的鼠标滚轮

Detecting mousewheel on the x-axis (left and right) with Javascript

提问by bob_cobb

I know it's possible to detect up and down e.g.

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

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

But is there a way to detect if a user's mouse went left or right with the mousewheel?

但是有没有办法检测用户的鼠标是通过鼠标滚轮向左还是向右移动？

采纳答案by apsillers

• The DOMMouseWheelevent in Firefox has an axisproperty.

• The mousewheelevent in Chrome has wheelDeltaXand wheelDeltaY.

• Sadly, I cannot find any equivalent propery for IE events (testing on IE9).

• 在DOMMouseWheelFirefox中的事件有一个axis属性。

• mousewheelChrome 中的事件具有wheelDeltaX和wheelDeltaY。

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

回答by robocat

Internet Explorer: In IE9 and IE10 you have to use the onwheelevent (not the onmousewheel, nor DOMMouseScroll) using addEventListenerto be able to detect the horizontal wheel scrolling from the DOM. Use the event.deltaXvalue along with the event.deltaModevalue to detect horizontal mouse wheeling (for vertical wheeling use the event.deltaYvalue). For <= IE8 use the onmousewheelevent and the event.wheelDelta(only yaxis mouse wheeling supported for older IE versions).

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

Blink/Webkit: Support since Chrome 31/Safari 7 for the onwheel event. Otherwise use the onmousewheelevent and the event.wheelDeltaXand event.wheelDeltaYproperties. Chrome/Safari only trick: using the SHIFT key while mousewheeling scrolls left/right (useful for testing).

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

Firefox: Firefox 17 and higher support the onwheel event. To support older versions of Firefox (back to 3.6) use the now deprecated DOMMouseScrolland the event.axis and event.detail properties to support horizontal scrolling. (Firefox mobile: the docs imply that the onwheel event will fire when panning using a touch device. I haven't tried it.). Firefox also has a MozMousePixelScrollevent. The MDN documentation also gives suggested code to handle the different events across browsers. Firefox also has a mousewheel.enable_pixel_scrolling configuration which may affect all the different wheel events.

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

Try the onwheel event out yourselfusing the wheel event tester from QuirksMode. I could see this working using IE9 on Win7, and IE10 on Windows 8 (release preview, IE version 10.0.8400.0). To setup for the new standard onwheel event:

使用来自 QuirksMode 的轮子事件测试器自己尝试轮子事件。我可以在 Win7 上使用 IE9 和 Windows 8 上的 IE10（发布预览版，IE 版本 10.0.8400.0）看到这个工作。设置新的标准 onwheel 事件：

• Select addEventListener (capture) radio.
• Untick scroll.
• Untick mousewheel.
• Leave wheel ticked.
• Tick show event properties at bottom of right column.
• Use F12 and confirm that the document is in documentMode IE9 Standards or IE10 Standards.
• Do some mouse wheeling on the centre column and see the wheel events get logged in the left column, and the wheel event details show at the bottom of the right column.
• Sometimes you might need to untick and retick the wheel event checkbox to get events (not sure why: maybe bug in quirksmode page or in IE?)

• 选择 addEventListener（捕获）单选。
• 取消滚动。
• 取消鼠标滚轮。
• 离开轮子打勾。
• 勾选右列底部的显示事件属性。
• 使用 F12 并确认文档处于 documentMode IE9 标准或 IE10 标准。
• 在中心列上做一些鼠标滚轮，看到滚轮事件记录在左列中，滚轮事件详细信息显示在右列的底部。
• 有时您可能需要取消勾选并重新勾选滚轮事件复选框以获取事件（不知道为什么：也许是 quirksmode 页面或 IE 中的错误？）

The W3C specification, the Microsoft IE9 documentation for the MouseWheeleventand the MDN docsspecify for the onwheelevent:

在W3C规范中，微软IE9文档中的MouseWheel事件和MDN文档指定onwheel事件：

• deltaX- Gets the distance that a mouse wheel has rotated around the x-axis (horizontal).
• deltaY- Gets the distance that a mouse wheel has rotated around the y-axis (vertical).
• deltaZ- Gets the distance that a mouse wheel has rotated around the z-axis.
• deltaMode- Gets a value that indicates the unit of measurement for delta values:
  • DOM_DELTA_PIXEL(0x00) Default. The delta is measured in pixels.
  • DOM_DELTA_LINE(0x01) The delta is measured in lines of text.
  • DOM_DELTA_PAGE(0x02) The delta is measured in pages of text.

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

Edit: make sure you DO NOT preventDefault() the event if event.ctrlKeyis set, otherwise you will probably prevent page zooming. Also apparently the ctrlKey is set to true if you use pinch-zoom on a touchpad in Chrome and IE.

编辑：确保您不要 preventDefault() 如果event.ctrlKey设置了该事件，否则您可能会阻止页面缩放。如果您在 Chrome 和 IE 的触摸板上使用双指缩放，显然 ctrlKey 设置为 true。

Feature detection is difficult in IE:

IE中的特征检测很困难：

• In IE10 with IE8 documentMode, 'onwheel' in documentreturns true but it seems that no events are fired for horizontal or vertical onwheel event.
• In IE9 'onwheel' in documentreturns false but the onwheel event works (I guess that document.documentMode === 9should be checked before using the onwheel event in IE9).
• In IE9 and IE10 traditional document.onwheel = 'somefunc(event)'doesn't seem to work even in documentMode 9 or 10 (i.e. looks like you can only use addEventListener).

• 在带有 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）。

To test, use a Microsoft tiltwheel mouse, a scrolling touchpad (gesture or zone), or an Apple device (magic mouse or mighty mouse scrollball). Play with various mouse or touchpad settings in windows (or mouse preferences on OSX if testing horizontal scrolling on OSX with Safari).

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

The signs of the delta values have the opposite sign for onwheel and onmousewheel for all browsers. In IE the delta values are different for onwheel and onmousewheel, for example (using my dev machine with IE9 with a very standard Microsoft mouse):

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

• event.deltaYwas 111 on Win8 or 72 on Win7 for onwheelevent scrolling down one notch. The value changes slightly with zoom, but there is some other factor involved as well that I can't work out (doesn't seem to be font-size).

• event.wheelDeltawas -120 for onmousewheelevent scrolling down one notch.

• For Windows XP "We have to add support for the WM_MOUSEHWHEELmessage to make that work [, support] was added in Vista so if you are using XP you need IntelliType Pro and/or IntelliPoint installed" - as per this article.

• Various common touchpad and mouse drivers bust the mouse wheel support for browsers e.g. broken browser detection, or using the WM_HSCROLL and WM_VSCROLL messages instead of the WM_MOUSEWHEEL and WM_MOUSEHWHEEL messages. So so drivers will not generate wheel events in the browser (regardless of which browser you used, or which version of Windows you used). A search of Bugzilla for WM_VSCROLLshows problems that could affect any browser (not just Firefox).

• 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）。一个用于WM_VSCROLL搜索的Bugzilla显示了可能影响任何浏览器（不只是Firefox）的问题。

回答by aglassman

I believe you can find the 'horizontal' or x-axis data from

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

event.originalEvent.wheelDeltaX

You should debug the code, and see what properties the event object has at runtime. This should confirm or deny if that property exists. From there, it is just a matter of detecting if the value differs.

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

回答by Knyri

Check the accepted answer for more links and info.

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

Bubbling scroll/mousewheel event

冒泡滚动/鼠标滚轮事件

event.detailspecifies the number of "ticks" that the mouse wheel moved.

Positive values mean down/right", negative up/left.

event.axisspecifies the axis of the scroll gesture (horizontal or vertical). This attribute was added in Firefox 3.5

Chrome implements the same behavior as IE AFAIK. In IE and Chrome: use e.wheelDeltaXand e.wheelDeltaY

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

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

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

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

回答by Annie

IE supports all of them: mousewheel | onmousewheelwhich are the event handlersas well as WheelEvent(provides DeltaX, DeltaY, DeltaZ) which is the standard Eventand MouseWheelEventinterface, which is also supportedin IE9+ (with WheelDeltaand number of other x, ycoordinates related properties).

IE 支持所有这些：鼠标滚轮 | onmousewheel其是事件处理程序以及WheelEvent（提供DeltaX，DeltaY，DeltaZ），这是标准的事件和MouseWheelEvent接口，其也支持（与IE9 +WheelDelta其他的和数目x，y坐标相关的属性）。

Tested on IE11.

在 IE11 上测试。

Related: Today when the touch events standard finally gets formalized, turned out IE11 already supported most of it: http://blogs.msdn.com/b/ie/archive/2015/02/24/pointer-events-w3c-recommendation-interoperable-touch-and-removing-the-dreaded-300ms-tap-delay.aspx.

相关：今天，当触摸事件标准最终正式化时，结果 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。

Aside: @bob_cobb, you may want to revisit your approved answer in favor of the most voted with most richer details one. This to help future visitor find the correct information and to show you even care for community!

旁白：@bob_cobb，您可能想重新审视您批准的答案，以支持投票最多、细节最丰富的答案。这可以帮助未来的访客找到正确的信息，并显示您对社区的关心！