元素的javascript addEventListener "wheel"仍然滚动窗口

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