鼠标滚轮事件不会在 Chrome 中触发正文答案

【问题标题】：mousewheel event doesn't fire over body in Chrome鼠标滚轮事件不会在 Chrome 中触发正文
【发布时间】：2014-10-21 03:09:09
【问题描述】：

我注意到 mousewheel 事件在使用最新版本的 Chrome 时在正文而不是任何其他元素上使用鼠标滚轮时不会触发。 (38.0.2125.104 m)。

使用绝对定位元素时会发生这种情况。

您可以在this fiddle 中通过滚动白色区域而不是红色区域来复制它。

知道为什么会这样吗？有什么解决办法吗？

使用的小提琴代码：

addMouseWheelHandler();

function addMouseWheelHandler() {
    if (document.addEventListener) {
        document.addEventListener("mousewheel", MouseWheelHandler, false); //IE9, Chrome, Safari, Oper
        document.addEventListener("wheel", MouseWheelHandler, false); //Firefox
    } else {
        document.attachEvent("onmousewheel", MouseWheelHandler); //IE 6/7/8
    }
}



function MouseWheelHandler(e) {
    e = window.event || e;

    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.deltaY || -e.detail)));
    console.log("mouse wheel!" + delta);

    return false;
}

【问题讨论】：

这仍然是一个问题（至少在 Mac Catalina 上）。这些建议都不起作用。在 Chrome 中拦截鼠标滚轮事件的任何解决方案？

标签： javascript jquery google-chrome mousewheel

【解决方案1】：

这似乎是一个错误。事件侦听器附加到文档，因此它应该应用于整个文档，而与正文元素的高度无关。

作为一种解决方法，您可以添加以下代码：

document.body.style.height= document.body.scrollHeight+'px';

【讨论】：

警告：查看 document.body.scrollHeight 的变化并非易事。在正文中添加一个包装器元素并在该元素上观看鼠标滚轮，我取得了更好的成功。

【解决方案2】：

这是因为你的身体没有高度，所以你在文档之外滚动。如果子元素是绝对定位的，则父元素不会扩展到其子元素的大小。尝试添加如下内容：

html, body {
    min-height: 2000px;
}

或从position: absolute;更改您的内容

【讨论】：