防止鼠标滚轮滚动，但不影响滚动条事件。JavaScript

Question

我想让网页只能通过滚动条来滚动。我尝试过找到如何捕获滚动条事件，但是我认为这是不可能的。目前我使用以下函数：

function preventDefault(e) {
    e = e || window.event;
    if (e.preventDefault) {
        e.preventDefault();
    } else {
        e.returnValue = false;
    }
}
function wheel(e) {
    preventDefault(e);
}
function disable_scroll() {
    if (window.addEventListener) {
        window.addEventListener('DOMMouseScroll', wheel, false);
    }
    window.onmousewheel = document.onmousewheel = wheel;
}

但是它们在我的情况下并不是很有用，因为它们会阻止所有滚动事件。你有任何想法吗？我已经思考了3天了，但没有找到答案（也没有问题）。谢谢！

- user2998173

---

我刚刚在我的控制台中使用了你的函数，看起来运行良好。我可以点击和拖动滚动条，但鼠标滚轮无法使用。这是你想要的吗？ - Villarrealized

Answer 1

防止窗口通过鼠标滚轮滚动：

由于文档级别的 wheel 事件 监听器被视为是 被动的, 我们需要将该 事件监听器 标记为 主动的：

window.addEventListener("wheel", e => e.preventDefault(), { passive:false })

如果一个 <div>（或其他元素）的 内容 是可以滚动的，您可以通过以下方式来防止它：

document.getElementById('{element-id}').onwheel = function(){ return false; }

关于滚动干预和使用被动监听器来提高滚动性能的更多信息。

---

过时的方法：
window.onwheel = function(){ return false; } // 旧方法
更多信息（感谢@MatthewMorrone）

- Saurin Dashadia

---

这似乎不再起作用了，在控制台中出现以下内容：[干预] 由于目标被视为被动，无法在被动事件侦听器内阻止默认操作。请参见https://www.chromestatus.com/features/6662647093133312 - Matthew Morrone

@MatthewMorrone 感谢您指出这一点。请查看更新的答案以获取解决方案。 - Saurin Dashadia

@SaurinDashadia，谢谢！如果父元素上有鼠标滚轮监听器，您只需在onwheel函数中返回true。然后，滚轮事件将在子元素上正常工作，并且不会触发父元素上的滚轮事件。 要恢复父元素的滚轮事件，您需要将onwheel函数设置为null。 - gearcoded

Answer 2

jQuery解决方案，防止鼠标滚轮引起窗口滚动：

$(window).bind('mousewheel DOMMouseScroll', function(event){ return false});

如果您想防止鼠标滚轮在单个DOM元素中滚动，请尝试以下方法：

：

$('#{element-id}').bind('mousewheel DOMMouseScroll', function (e) { return false; });

DOMMouseScroll事件在Firefox中使用，因此您需要同时监听。

- Daniel M. M. Pochintesta

---

非常成功！ - Stender

在Chrome上（版本为78.0.3904.108），它实际上运行良好。 - Graham Meehan

Answer 3

我目前正在使用这个，它运行良好。使用滚动条来滚动正常工作，但鼠标滚轮无法使用。

我这样做的原因是我有自定义代码来滚动我想要的方式，但如果不添加任何代码，它就不会在滚轮上滚动。

window.addEventListener('wheel', function(e) {  
    e.preventDefault();
    // add custom scroll code if you want
}

- Mateus Ramos