阻止鼠标滚轮滚动，但不阻止滚动条事件。 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;
}

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

Answer 1

防止窗口用鼠标滚轮滚动：

由于文档级别

wheel

事件监听器被视为被动，我们需要将此事件监听器标记为被视为主动:

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

如果 <div>（或其他元素）的 content

是可滚动的，你可以像这样阻止它：

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

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

---

过时的方法：

window.onwheel = function(){ return false; }   // Old Method

更多信息（感谢@MatthewMorrone）

Answer 2

防止鼠标滚轮滚动窗口的 jQuery 解决方案：

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

如果你想阻止在单个 DOM 元素中使用鼠标滚轮滚动，请尝试以下操作：

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

DOMMouseScroll 事件在 Firefox 中使用，因此您必须监听这两个事件。

Answer 3

我目前正在使用这个，效果很好。使用滚动条滚动效果很好，但鼠标滚轮不起作用。

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

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