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应该是图像高度 - 窗口的高度（这将滚动到图像的底部）。