捕获滚轮事件答案

【问题标题】：Capturing Scroll Wheel Events捕获滚轮事件
【发布时间】：2012-11-08 01:43:57
【问题描述】：

当用户在页面不滚动/不可滚动的情况下滚动滚轮时，我想捕获一个事件。但是，标准的 JS 滚动事件仅在浏览器实际滚动时触发，并且不会为样式设置为隐藏溢出的 DOM 元素触发。

Google 地图的滚动缩放是我正在寻找的行为类型的一个示例。

有人知道如何完成这样的事情吗？

谢谢。

【问题讨论】：

它适用于 Firefox 和 Chrome。 现场演示： jsfiddle.net/chtNP/1
这在 IE 或 Opera 中效果不佳，具体取决于版本（请参阅adomas.org/javascript-mouse-wheel）
@KelvinMackay 我已经在 IE9 和 IE8 中进行了测试，并且可以正常工作。
@KelvinMackay 我更新了我的演示以包含'mousewheel' 事件。

标签： javascript mouseevent

【解决方案1】：

您可以很好地捕获鼠标滚轮事件：

$( '#yourElement' ).on( 'DOMMouseScroll mousewheel', function () {
    ...
});

现场演示： http://jsfiddle.net/chtNP/1/

（我正在使用 jQuery 来绑定事件处理程序，但当然，无论您使用哪种 API，它都可以工作。）

【讨论】：

完美，谢谢，我不知道那个事件，我在谷歌搜索时一定错过了。
是否可以确定用户是向上还是向下滚动？
@RobinCastlin 是的。滚动事件为此提供了一个属性。虽然有不同的实现，所以你必须编写一些 if-else 代码来获取跨浏览器的值。
请注意 DOMMouseScroll 和 mousewheel 事件已被弃用。标准化事件名称为wheel。

【解决方案2】：

此时，Firefox 定义了 DOMMouseScroll 和 wheel 事件。 Chrome、Opera 和 IE（又是最新的！）定义了鼠标滚轮。

我就是这样做的：

if(window.onwheel !== undefined) {
    window.addEventListener('wheel', onMouseWheel)
} else if(window.onmousewheel !== undefined) {
    window.addEventListener('mousewheel', onMouseWheel)
} else {
    // unsupported browser
}

请注意，旧 IE 版本中的 addEventListener 支持需要一个 polyfill。或者，您可以使用旧的 window.mousewheel = function(){} 或任何方法。

如您所见，事件侦听器附加到窗口对象。您不能以跨浏览器的方式将其附加到元素上。您可以使用事件对象的目标属性来查看它被触发的位置，并在此基础上进行过滤。

PS：另一个跨浏览器注意事项：在 IE 中，当在回调函数（“onMouseWheel”）中处理事件对象时，您必须在事件对象内部使用“wheelDelta”属性（并将其反转！）。其他浏览器将填充“deltaY”（或用于水平滚动的“deltaX”）。

【讨论】：

【解决方案3】：

使用 jQuery，您可以使用 this plugin，或任何数量的类似的，做同样的事情。

如果 jQuery 或类似的框架不是一个选项，也可以，但是当你想让它在多个浏览器中工作时，你要为一个痛苦的世界做好准备......

【讨论】：

如果你必须阅读文档（就像我一样），在没有 jQuery 的情况下实现需要更多（更多！）时间。但我不会称之为痛苦的世界，特别是如果你只是复制粘贴我的解决方案。