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，您可以使用this plugin或任何可以执行相同操作的类似代码。

如果jQuery或类似的框架不是一个选项，那么当你想让它在多个浏览器中工作时，它可能会为你带来痛苦的世界......

捕捉滚轮事件

3 个答案: