javascript - 捕获滚轮事件

Question

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

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

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

谢谢。

Answer 1

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

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

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

（我使用 jQuery 来绑定事件处理程序，但不管你使用哪个 API，它都可以工作，当然。）

Answer 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”）。

Answer 3

使用 jQuery，您可以使用这个插件，或者任何数量的类似插件来做同样的事情。

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