javascript addEventListener "wheel" for element 仍然滚动窗口

Question

我有以下javascript代码，当用户想要查看大图像时触发：

var divOverlay = document.getElementById ("overlay");
divOverlay.style.visibility = "visible";
divOverlay.addEventListener ("wheel", zoom); // respond to mouse wheel

函数 zoom(( 工作正常。它处理来自鼠标滚轮的事件，并放大或缩小包含在"叠加"中的图像。

问题是鼠标滚轮事件也会导致整个浏览器窗口滚动。我希望鼠标滚轮事件只转到"叠加"。

我尝试添加这个：

origOnWheel = window.onwheel;
window.onwheel = function() { return false; }

随后，当用户完成后恢复window.onWheel。这部分有效：它可以防止窗口滚动，然后用户缩放"叠加"。但是，当用户完成(并且 window.onWheel 已还原(时，主浏览器窗口不再使用鼠标滚轮滚动。

Answer 1

如果没有有效的jsfiddle，给出一个完整的(工作(示例会有点困难，但以下是准则：

1. 在zoom函数中 - 当您想阻止页面的常规滚动时 - 您应该使用event.preventDefault()
2. 您需要决定是否要禁用默认滚动 - 基本上这将基于图像的高度与窗口的高度(window.innerHeight(。如果图像的高度较大 - 您不应使用event.preventDefault()或执行阻止默认值并设置window.scrollTo(x, y)，其中y应该是图像的高度 - 窗口的高度(这将滚动到图像的底部(。